jQuery - Styling DOM

In this tutorial we will learn to style the DOM using jQuery.

css() method

To add style to any page we use the CSS (Cascading Style Sheet) files. jQuery provides us the css() method which we can use to style the HTML elements.

In this tutorial we will look at some of the styling properties to style the elements.

Click here for CSS tutorials.

Setting single styling property

To set a single styling property we pass the property and value in quotes to the css() method.

In the following example we are setting the color property of all the paragraphs in the page to #111.

$("p").css("color", "#111");

Setting multiple styling properties

To set multiple styling properties we pass an object to the css() method.

In the following example we are setting the font-size of all the div element having class container to 16px and background-color property to #fff.

$("div.container")
  .css({
    "font-size": "16px",
    "background-color": "#fff"
  });

Getting css value

We can also use the css() method to get the value set for any given property for any element.

In the following example we are fetching the value set for the color property for a div element having id username.

var color = $("#username").css("color");

The variable color will hold the value of the color property for the selected div.

If we have multiple elements selected by the selector then the css() method will not return value for all the elements.

This will not give the correct result.

console.log( $("div").css("color") );

If there are more than 1 div selected by the above code then the css method will return the color value of only the first selected element.

Using class to style elements

We generally have bunch of style rules saved in stylesheets. And it is a common practice to apply the style by adding the class to any element.

For example, if we are using the Twitter Bootstrap framework then we can easily align text inside a div to lets say, at the center by using the text-center class.

Sample stylesheet

Lets say, we have the following sample stylesheet that we have included in our page.

// file: style.css
.bg-lightyellow {
	background-color: lightyellow;
}

.bg-salmon: {
	background-color: salmon;
}

.color-black: {
	color: black;
}

.color-white: {
	color: white;
}

We have defined four classes for background-color and color. If we add the classes to any element then the respective style rule will be applied to the element.

Add class

Lets say we want to add background color "lightyellow" to a div having id "sample-div1".

To achieve this we can simply add the "bg-lightyellow" class by using the addClass() method and passing the class value.

$("#sample-div1").addClass("bg-lightyellow");

Remove class

Similarly, we can remove class from an element by using the removeClass() method.

In the following example we are removing the "bg-lightyellow" class from an element having id "sample-div1".

$("#sample-div1").removeClass("bg-lightyellow");

Has class

We can even check if an element has a given class by using the hasClass() method.

In the following example we are checking if an element having id "sample-div1" has the class "bg-salmon".

console.log( $("#sample-div1").hasClass("bg-salmon") );

The above code will print true if the class is present, else it will print false.

Toggle class

We can also toggle any class for a given element using the toggleClass() method.

In the following code the element having id "sample-div1" will get a class "color-black" if the class is not added to it. And If the class is already added then it will be removed from the element.

$("#sample-div1").toggleClass("color-black");

Show and Hide element

This is a common requirement. We may have to show or hide element in a page using css. We can either use the display property and set its value to none. Or, we can use the show() and hide() method provided by jQuery.

In the following example we are hiding an element having id "sample-div1".

$("#sample-div1").css("display", "none");

We can achieve the same result by using the hide() method.

$("#sample-div1").hide();

Similarly, we can show any hidden element by using the css() method.

$("#sample-div1").css("display", "block");

Or, we can use the show() method to get the same result.

$("#sample-div1").show();

We can also use the visibility property to hide and show element.