Adding and Removing CSS Classes with the jQuery JavaScript Library - Adding and removing CSS classes on the fly
(Page 2 of 4 )
As I mentioned in the beginning, “jQuery” comes equipped with a couple of methods for dynamically manipulating the CSS classes of a targeted element of a web page. The first one of these is simply called “addClass().” It attaches a CSS class to a selected element.
The prototype for using this method can be seen in the following code sample, so have a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic example on using jQuery with addClass() method</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: 24px bold Arial, Helvetica, sans-serif;
color:#000;
}
.largetext{
font: normal 22px Arial, Helvetica, sans-serif
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").addClass('largetext')
});
</script>
</head>
<body>
<h1>Basic example on using jQuery with addClass() method</h1>
<a href="http://www.devshed.com/">Visit Devshed.com now!</a>
</body>
</html>
As shown above, the “addClass()” method can be really helpful for assigning a specific CSS class to a given web page element. In the previous example, a “largetext” class is dynamically tied to a link, after the whole web document has been loaded. Pretty simple to grasp, isn’t it?
On the other hand, jQuery provides another method, called “removeClass(),” that performs exactly the opposite operation -- it unties a CSS class from a selected web page element. The way that this method works will be better understood if you examine the following code sample. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic example on using jQuery with removeClass() method</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: 24px bold Arial, Helvetica, sans-serif;
color:#000;
}
.smalltext{
font: normal 11px Arial, Helvetica, sans-serif
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").removeClass('smalltext')
});
</script>
</head>
<body>
<h1>Basic example on using jQuery with removeClass() method</h1>
<a href="http://www.devshed.com/" class="smalltext">Visit Devshed.com now!</a>
</body>
</html>
That wasn’t rocket science! As you can see, the “removeClass()” method has been used to remove a “smalltext” CSS class from a sample link, after the entire web document has finished loading.
So far, so good. At this point, assuming that you've already grasped how the “addClass()” and “removeClass()” methods do their business, it’s time to more deeply explore the actual functionality of these methods, since they allow us to work with more complex CSS selectors in a simple fashion.
Therefore, in the following section, I’m going to show you how to use this useful characteristic to dynamically add a CSS class to a selected element within a web page.
To learn the complete details for how this process will be achieved, please click on the link that appears below and keep reading.
Next: Dynamically adding a CSS class to a predefined web page element >>
More JavaScript Articles
More By Alejandro Gervasio
