JQuery: interacting with the wrapped set- part VI

Today we’re going to concentrate on styles. JQuery offers us several methods that help when we need to style our elements. Lets start with the css method. This method can be used to get or set a specific style. In fact, it’s really similar to the attr method we’ve met in the previous post. Lets assume that we want to change the color of the text of  all div elements. Here’s how I’d do it with JQuery:

$("div").css("color", "red");

Notice that setting a CSS property means that all the elements on the wrapped set will have that property set. Again, if you want, you can also pass a function which will be called  for each of the wrapped elements. And, of course, inside the function  this points to the current element. It’s so similar that I won’t be putting any code for it here. And yes, there’s also the possibility of  setting multiple CSS property and values through an anonymous object. Again, this works in exactly the same way as the attr method and that’s why we won’t repeat ourselves here.

If you want to get a value of a CSS property, then you should only pass the name of the property. As you might expect by now, doing this means that you’ll get that value for the first element on the wrapped set.

JQuery has also a nice set of helper methods for those simple cases which, in plain truth, aren’t really that simple. For instance, getting the width and height of an element is something that seems simple, right? How do you do that? I mean, how would you get the width and height of an element if you didn’t had JQuery? Unfortunately, using the style.width won’t do it because it will only when you’ve previously set it up…

Fortunately, JQuery’s width and height methods solve all those problems for you and return a number  with the correct values for those properties. You can also pass a number to these methods.  As you might expect, this means that you’re changing the width or height of each element of the wrapped set.

If you’re into CSS and styles, then I’d say that you’ll probably end up using CSS classes lots of times. JQuery has some methods which help you get info about and interact with CSS classes that have been applied to DOM nodes. You can see if a CSS class has been applied to one of the wrapped element by using the has method. Here’s a quick example:

$("div").hasClass("red")

Setting the current CSS class can be done through the addClass. Calling this method results in adding the specified class name to all the elements of the wrapped set. Here’s an example:

$("div").addClass("red");

There are many people that don’t get this method until they understand that you may apply several classes to an HTML node (not sure why, but many expect a way to apply a single class to an HTML element and I guess that’s why they search for a setClass method when they start using JQuery). For instance, the following HTML is perfectly valid:

<div id="b" class="main secondary">something</div>

The final result is that the styles defined by both classes are merged and applied to the DIV element. Calling the addClass will simply add one more class to the list of CSS classes that have been applied to that element. Removing CSS classes is also possible: just call the removeClass method. The next snippet shows how to remove the main class from the previous DIV element:

$("#b").removeClass("main");

Notice that removing a class name means getting the value of the class attribute and parsing it. Not sure on what you think, but I do enjoy this  cool JQuery feature. Btw, and since we’re talking about cool stuff, I’d like to point out that JQuery also has another useful method: toggleClass. This method ends up adding the passed class name to the list of class names applied to the element if that name isn’t on the list or it will simply remove it from the class’ list if it’s already there. I guess that’s why they called the method toggle :)

And that’s it. I believe this should be enough for your JQuery’s CSS interactions. Keep tuned for more on JQuery.