• Choose a category
• All
• Classic-Fiction

Reading CSS Properties

Before we try changing CSS properties, let’s look first into how we can simply access them. jQuery lets us do this with the css function. Try this:

chapter_02/05_reading_css_properties/script.js

$(document).ready(function() {

var fontSize = $('#celebs tbody tr:first').css('font-size');

alert(fontSize);

});

This code will alert the font size of the first element matched by the selector (as you’ve likely guessed, the :first filter will return the first element among those matched by the selector).

Tip: CSS Properties of Multiple Elements

You can ask for a CSS property after selecting multiple elements, but this is almost always a bad idea: a function can only return a single result, so you’ll still only obtain the property for the first matched element.

The nifty aspect about retrieving CSS properties with this method is that jQuery gives you the element’s calculated style. This means that you’ll receive the value that’s been rendered in the user’s browser, rather than the value entered in the CSS definition. So, if you gave a div a height of, say, 200 pixels in the CSS file, but the content inside it pushed the height over 200 pixels, jQuery would provide you with the actual height of the element, rather than the 200 pixels you’d specified.

We’ll see why that’s really important when we come to implement some funky tricks a bit later.

Setting CSS Properties

So far we’ve yet to see jQuery actually do anything, and it’s high time to remedy that. We know the page is ready (since we popped up an alert), and we’re fairly sure we’ve selected the elements we’re interested in. Let’s check that we really have:

chapter_02/06_zebra_striping/script.js

$(document).ready(function() {

$('#celebs tbody tr:even').css('background-color','#dddddd');

});

You probably saw that coming! This is the same css function we used to read a CSS property, but now it’s being passed an extra parameter: the value we wish to set for that property. We’ve used the action to set the background-color to the value #dddddd (a light gray). Open the file from the code archive in your browser and test that it’s working correctly. You can see the result in Figure 2.2.

Figure 2.2. Zebra striping implemented with jQuery

Important: Were You Ready?

As mentioned previously, this command must be issued from within our document-ready function. If we run the command before the DOM is ready, the selector will go looking for the #celebs element, but will find nothing that matches. At this point it will give up; it won’t even look for the tr elements, let alone change the background style.

This is true for all of the examples that follow, so remember to wrap your code in the document-ready function.

It’s looking good! But perhaps we should add a little extra to it—after all, more is more! What about a shade lighter font color to really define our stripes? There are a few ways we could add a second CSS property. The simplest way is to repeat the entire jQuery statement with our new values:

chapter_02/07_multiple_properties_1/script.js (excerpt)

$('#celebs tbody tr:even').css('background-color','#dddddd');

$('#celebs tbody tr:even').css('color', '#666666');

These lines are executed one after the other. Though the end result is correct, it will become quite messy and inefficient if we have to change a whole slew of properties. Thankfully, jQuery provides us with a nice way to set multiple properties at the same time, using an object literal. Object literals are a JavaScript concept beyond the scope of this book, but for our purposes, all you need to know is that they provide an easy way of grouping together key/value pairs. For CSS, object literals allow us to match up our CSS properties (the keys) with the matching CSS values (the values) in a neat package:

chapter_02/08_multiple_properties_2/script.js (excerpt)

$('#celebs tbody tr:even').css(

{'background-color': '#dddddd', 'color': '#666666'}