JQuery CSS Selectors Methods

In Last some blogs we have learnt about jQuery Selectors, Attributes and Traversing methods. Now we will learn, how to use CSS with jQuery. jQuery library supports all CSS selectors. If we are using jQuery we can enhance our website without any browser tension (version and JavaScript enabled/ disabled). We use jQuery CSS methods to update the properties of a HTML tag.

We use simple Syntax for jQuery CSS methods:

selector.css( PropertyName, PropertyValue );

Let's understand this syntax using an Example..



Here we are using CSS for all three DIVs.

DIV1 : $("div").eq(0).css("font-size", 20 );
DIV2: $("div").eq(1).css("color", "blue");
DIV3: $("div").eq(2).css("background-color", "red");

The output for this Code will be:



And if we want to Apply Multiple CSS for individual HTML element, then the Syntax will be:

selector.css( {key1:val1, key2:val2, ....keyN:valN})

Lets understand using an Example:



See above code, We are using multiple styles for every DIV.

The Output for the above code will be:



In Similar way we can work with other JQuery CSS Methods. There are many other methods like: height( val ), height( ), innerHeight( ), innerWidth( ), offset( ), width( ), width( val ), scrollTop( ), scrollTop( val ), scrollLeft( ), scrollLeft( val etc.

Do Practice with these jQuery CSS methods, ping me if you got any problem. Keep Coding.