Setting multiple CSS properties with jQuery

Changing a single CSS property on an HTML element is easy and changing multiple properties is not much more difficult. In fact, it looks very much like plain CSS with a few extra characters thrown in for good measure.

In the example below, we've used the jQuery :odd selector to style all the odd table rows without the need for a class on those rows but this time we're styling the background colour and the foreground colour.

Top 10 counties by population

Rank County Region Population Density
1 Greater London London 7,813,600 4,979
2 West Midlands West Midlands 2,655,200 2,945
3 Greater Manchester North West 2,629,500 2,061
4 West Yorkshire Yorkshire and the Humber 2,249,500 1,109
5 Kent South East 1,427,500 382
6 Essex East 1,412,900 385
7 Merseyside North West 1,353,400 2,099
8 South Yorkshire Yorkshire and the Humber 1,328,300 856
9 Hampshire South East 1,296,900 344
10 Lancashire North West 1,169,300 380

Here's the script that does the work:

<!-- load jQuery from Google CDN -->
<script src="
jquery.min.js"></script> <script> $(document).ready(function(){ $("#counties tbody tr:odd").css({ "background-color":"#d3e6ff", "color":"#3267ac" }); }); </script>

Notice that the syntax for the style declaration property and value pairs is almost identical to plain CSS. The only difference is that we need to add quotes and each declaration is terminated by a comma rather than the semi-colon.

Here is part of the markup for the table:

<table id="counties">
         <td>Greater London</td>…

The table has an id="counties" which is used to identify this particular table but other than that there are no ids or classes in the table.

No additional CSS is required because the styling for the even rows is set using the jQuery .css method.