CSS3 Tutorial: CSS with jQuery

CSS3 en jQuery.

Besides placing so called "hard-coded" CSS rules in a stylesheet, we can adjust the styling of DOM elements in an HTML document dynamically, using javascript. In particular, we will look at the use of the jQuery javascript library, where all CSS selectors (CSS1until CSS3) are supported. The major advantage of using jQuery for CSS purposes is that you, when opening the box of tricks, no longer have to worry about the support of the CSS in different browsers. jQuery take care of this for you. A precondition however is that javascript is enabled in your browser.

If Javascript is used in a web page, one should always take into account the browsers that do not support Javascript. For this, we apply the concepts of progressive enhancement and graceful degration by which we assure that, although the non-javascript browsers remain devoid of advanced effects, they render the the page with all the available and/or essential information (content). For this type of browsers no content (text, images) should be lost.

Using jQuery,there are two different ways to add (or to remove or modify) dynamic styles to DOM elements:

  1. using the addClass() method. This is the proper method for stylesheet changes using jQuery and whenever possible used by default. For this method you will need access to the CSS stylesheet.
  2. using the css() method. This method is used when you have no access to the stylesheet and method1 cannot not be applied.
Of both methods we will give an example:

Example method 1: Formatting rows of a table in alternating colors (row striping) using the addClass() method.

In this example we will, dynamically, give alternating colors to the rows of a table: the even rows get a different color than the odd rows, resulting in the so-called zebra effect. The CSS classes that we assign to the table rows and which define the color of the row are complete dynamically applied with jQuery (in scripts.js). The classes themselves are then defined in a stylesheet (styles.css). Through this process we will encounter no formatting styles, no class or ID selectors and no CSS rules in the HTML code. The perfect separation of markup, presentation and functionality. Speaking of clean programming!

The code in scripts.js

//script.js
$(document).ready(function() {
    $('table').addClass('example');   
    
    $('table thead').each(function() {
      $(this).find('th').addClass('tabeltitel'); 
    }); 
      
    $('table tbody').each(function() {
      $(this).find('th').addClass('tabeltitel'); 
      $(this).find('tr:not(:has(th)):odd').addClass('odd');
      $(this).find('tr:not(:has(th)):even').addClass('even');
    });  
});

The CSS in styles.css

table{
  border:0;
  margin-top: 3	0px;
  margin-left: 70px;
}  

thead th {
  background-color: #666;
  color:#FFF;
  padding: 10px; 
}  

tr.even{
  background-color: #eee;
}  

tr.odd{
  background-color: #ddd;
}  

td{
  padding: 10px; 
}  

The HTML code

<!DOCTYPE html>
<html>
<head>
	<title>CSS en jQuery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
  <table>
  <thead>
      <tr>
      	<th colspan="3">2011</th>
      </tr>
  </thead>
  <tbody>
      <tr>
        <td>1</td>
        <td>Lorem ipsum</td>
        <td>767476</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Sed et lectus</td>
        <td>078304</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Morbi consequat</td>
        <td>758395</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Nunc nec lacus</td>
        <td>476049</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Praesent neque</td>
        <td>853845</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Mauris diam </td>
        <td>237583</td>
      </tr>
  </tbody>
</table>
</body>
</html>
tabel opgemaakt met behulp van CSS en jQuery
Image 1. A stylized table using the jQuery addClass () method

Check this example in your browser

Whenever we want to remove the applied styles again (see Figure 1a), we can use the remove() method.

This is done as follows:
//script.js

$(document).ready(function() {
    $('table').removeClass('example');   
    
    $('table thead').each(function() {
      $(this).find('th').removeClass('tabeltitel'); 
    }); 
      
      $('table tbody').each(function() {
      $(this).find('tr:not(:has(th)):odd').removeClass('odd');
      $(this).find('tr:not(:has(th)):even').removeClass('even');
    }); 
});

tabel opgemaakt met behulp vanCSS en jQuery
Image 1a. The unstylized table where all the style formatting is removed with the jQuery remove() method.

Check this example in your browser

Example method 2: Inline CSS adjustment using the css() method

.css('property','value')
.css({'property1':'value','property2':'value2'})

As mentioned, this method is used when no access is possible to the stylesheet. The CSS properties in its entirety, are defined using the jQuery css () method. This method functions either as a setter, or as a getter. To to find out the value of a style property, we simply pass on the name of the property as a string:

// in camelcase notatie
.css('backgroundColor') 
// of in CSS notatie, beiden zijn toegestaan
.css('background-color') 

The code in scripts.js

//script.js
$(document).ready(function() {
 $('table').css({'margin-top': 30, 'margin-left': 70}); 
  
  $('table thead').each(function() {
  $(this).find('th').css({'backgroundColor': '#0082c6', 'padding':10}); 
  }); 
  
  $('table tbody').each(function() {
  $(this).find('tr:not(:has(th)):odd').css('backgroundColor', '#7fc0e2'); 
  $(this).find('tr:not(:has(th)):even').css('backgroundColor', '#bfe0f1'); 
  });
  
  $('td').css('padding', 10); 
});

 

tabel opgemaakt met behulp vanCSS en jQuery
Image 2. A stylized table using the jQuery css () method

Check this example in your browser

Leave a comment