Styling with jQuery

jQuery library allows the designers and developers to rapidly implement elegant design features resulting in interactive website. Cross browser compatibility, CSS3 selectors, plugins and inbuilt functions for common actions are the main features of jQuery. The jQuery UI library is built to support the core library for quickly adding customizable widgets. On top of it, there are thousands of useful plugins. No wonder, the web giants like Google, Amazon, Digg and WordPress are using jQuery.

We started understanding jQuery wrapper and selecting the DOM elements in recent posts. Let’s get familiar with reading and setting CSS properties and classes to selected DOM elements.

Reading CSS Properties

Before we start adding and modifying the CSS properties, let’s begin with reading the CSS properties.

var fontSize = $('#findMyFontSize' ).css('font-size');

alert(fontSize); 

The above lines of code alert the font size of the DOM element having ID “findMyFontSize”. There can be multiple classes applicable to the element and all may have different font sizes. The beauty of jQuery is that it returns the style values as calculated by browser. This means that you will receive the value rendered in the browser and that might be different from the value entered in the CSS definition. The passed and the rendered values are at times different primarily because of class definitions in the browser default user-agent style sheet.

Browser Inconsistencies in Reading CSS properties

Different browsers support different methods to find the style values. The standard browsers use old JavaScript function getComputedStyle() method while IE uses the currentStyle and runtimeStyle properties. Many properties are treated differently by different browsers. For example, W3C standards compliant browsers refer to float property as cssFloat while IE’s DOM refers to it as styleFloat. jQuery brings out a uniform way to handle these properties.

The .css() method of jQuery takes into account the differences in DOM implementation by different browsers. So, selecting a left floated <div>, whether float, cssFloat or styleFloat is passed to the .css(), will return ‘left’. Thus, jQuery treats the three values as synonyms and takes away the pain of handling browser inconsistencies.

On slightly different note, different browsers may return logically the same value for background color, but jQuery still supports two ways to read the background color.

$('#findMyFontSize' ).css('background-color');

$('#findMyFontSize' ).css('backgroundColor'); 

The background-color is the CSS name and the backgroundColor is the DOM name.

jQuery, however, doesn’t allow use of shorthand CSS properties like margin, border and background in the .css() method. You need to request individual properties like margin-left, border-left-width, and background-color.

Setting and Modifying CSS Properties

The same .css() method of jQuery permits you to add the value of the CSS property as the second parameter. So, in the basic font size example, you can set the font size to 12px, simply by passing it as second argument in the method.

$('#findMyFontSize' ).css('font-size', '12px'); 

Multiple CSS properties can be passed to single .css method in the form of a comma separated key-value object.

$('.IMADiv').css({

'backgroundColor': '#F3F3F3',

'marginBottom': '10px'

}); 

The .css() method modifies the style property of the element, so the above example used to set font-size is equivalent to

document.getElementById('mydiv').style.fontSize = '12px'; 

Adding and Removing CSS Classes

The .css() method allows you to quickly change the CSS properties. This lets you to modify the style attribute of each selected element. But, overuse of the practice mixes the content with presentation and thus, is not a good design example. The above scenario can be equated to writing the entire style attributes in the DOM element. The purpose of having stylesheets and styling classes gets defeated.

jQuery provides the solution  to help you keep your code clean and maintainable. The CSS classes can be applied or removed from any DOM element as quickly as a single CSS property. This keeps the content separated from the presentation.

jQuery provides three methods to add, remove and toggle CSS classes. The methods are .addClass(), .removeClass() and .toggleClass(). The .addClass() method dynamically adds one or more classes to the selected element (/s). Similarly, .removeClass() removes the CSS class and .toggleClass() toggles between the classes applied to the selected element or set of elements.

$('#addClassOnDiv').addClass('cssClassAdded');

$('#addClassOnDiv').removeClass('cssClassAdded');

$('#addClassOnDiv').toggleClass('cssClassAddedAgain'); 

Multiple classes can be passed to any three of the above functions by separating the class name with a space. To check the presence of a class on any element in the selection, you can also use .hasClass(className).

2 Responses to “Styling with jQuery”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>