www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons jQuery Working With CSS Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
Working with CSS using jQuery is very easy. jQuery allows us to change both the style attribute and the class(es) of an element, using one of the several different jQuery methods discussed in this lesson.

The class attribute, as you may know, takes one or more than one class names from our CSS file. A CSS file contains definition(s) of CSS styles. A CSS file is saved with .css extension.

A very simple example of a CSS file follows:

. bold {
        font - weight : bold ;
}

. yellow {
        color : yellow ;
}

If you are not familiar with CSS, go to our CSS Tutorials section for more information.

The following example uses three very important CSS class related methods i.e hasClass(), addClass() and removeClass():

<html>
<head>
<title>jQuery CSS</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<style>
.bold {
font-weight:bold;
}
.yellow {
color:yellow;
}
</style>
<body>
<a href = "javascript:void(0);" onclick = " changeClass ( this ); " > Change Style </a>

<script type = "text/javascript" >
function changeClass ( sender )
{
if ( $ ( sender ). hasClass ( "bold" ))
$ ( sender ). removeClass ( "bold" );
else
$ ( sender ). addClass ( "bold" );
}
</script></body>
</html>

We have added two css styles in the header section of the above HTML web page. When the above code is run and the "Change Style" link is clicked, the link itself is passed to the changeClass() function as "this". Our function then uses jQuery hasClass() method to check if the link has a css class named bold associated with it. If there exists one the removeClass() method removes the same else it is added using the jQuery addClass() method.

We have a toggleClass() method in jQuery that toggles a CSS class. We can re-write the above code using the toggleClass() method as under:

<html>
<head>
<title>jQuery CSS</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
</head>
<style>
.bold {
font-weight:bold;
}
.yellow {
color:yellow;
}
</style>
<body>
<a href = "javascript:void(0);" onclick = " changeClass ( this ); " > Toggle Style </a>

<script type = "text/javascript" >
function changeClass ( sender )
{
$ ( sender ). toggleClass ( "bold" );
}
</script></body>
</html>


Next >>> Lesson No. 18: jQuery append() and prepend()







Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.