With jQuery, it is possible to do some interesting CSS tricks such as changing the style of your site dynamically. Let’s say for instance you with to have a certain style applied to your site when a number of conditions are met.You can do all that in jQuery when constructing the site. In case you are a beginner or advanced jQuery developer, this is a very useful trick to learn.
There are a number of things that are involved in changing the css style of a website. The general format of the jQuery css() function is this:
|
1 2 |
//general format of the css() function $('jQuery selector').css({"css property name":"css property value"}); |
Let’s take a scenario where we would like to change the text color on a page to blue, float all div elements with class .left and change the background of all elements that have the .bg-green class to have a green background. All we will be required to do is have the following bunch of code and we are good to go.
|
1 2 3 4 5 6 7 8 |
//change paragraph text color to blue $('p').css({"color":"blue"}); //float all divs with class .left $('div.left').css('float'); //change all elements with class .bg-green to have a red background $('.bg-red').css({"background-color":"green"}); |
You can also nest your jQuery CSS commands in order to not only save time, but make your code look much prettier. Take a look at the following piece of code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//Nesting jQuery CSS Code. Long Un-nested Version newimg.css({'background-image': 'url('/images/img.png')'}); newimg.css({'position': 'absolute'}); newimg.css({'height': '70px'}); newimg.css({'width': '200px'}); newimg.css({'top': '68px'}); newimg.css({'right': '2px'}); //Nesting jQuery CSS Code. Short Nested Version newimg.css({ 'background-image': "url('/images/img.png')", 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'}); |
As you can see, the second chunk of code is much shorter and simpler to read as compared to the first one. This is due to the fact that jQuery can easily interpret the CSS formatting of multiple-word properties. Smaller chunks of code are also easier to read and debug as compared to longer ones.
Removing CSS Styles
When it comes to removing CSS styles using jQuery, there are two approaches to this. First, you can remove the class that the element or page is associated with. Alternatively you can remove the CSS styles from an element directly. In both cases, you still achieve the same result in the end so there is no much difference between them. The code snippets below show both approaches.
Removing the class linked to the element
|
1 2 |
//Removing the class associated with the page or element $('#mydiv').removeClass('colors'); |
Removing CSS styles directly
|
1 2 3 |
//Remove styles directly from an element //remove text color from a div $('#mydiv').css('color', ''); |
For those situations when you wish to remove and add a class at the same time, there is one clever trick that does both in the same call. This comes in very handy in some situations so it is good that you know how to use it.
|
1 2 3 |
//Remove and add a class in one code //change text color from red to green $('#div').removeClass('red').addClass('green'); |
In other cases, you can extend a style depending on the current existing values. For example, the following code extends the value of padding-left from its existing value to a value greater by 10 pixels.
|
1 2 |
//Extend existing CSS values .css( "padding-left", "+=15" ) |
jQuery is a very powerful tool when it comes to changing the styles on a site dynamically. You build amazing effects dynamically using jQuery.