5 demos of jQuery to Add, change, remove CSS for div, menu, table and more
The jQuery method to set CSS properties
The CSS properties of the elements in the web page can be added, changed and removed (at run time) by using the jQuery css method.
The $.css can also be used to get the CSS properties of the first matched element in DOM.
I will show you a few demos to use $.css jQuery method in a div, a menu, HTML table, list, accordion and Bootstrap navbar – so keep reading.
Syntax of $.css method
To set CSS single property (add or modify):
To set multiple properties at one call:
See the following examples for having a better idea for real-time implementation. Click on demo links to see online with each example.
Starting with a simple div to change CSS
In this demo, a div is created with a few properties as web page loads. The properties are specified in the <style> section of head tag. As you click on the button, the CSS properties of div will be changed. See online:
See online demo and code
You saw, a div with a solid border with black color and without any background displayed as the demo page loaded. If you clicked the button “Change CSS”, the following properties were changed:
|
1 |
$(".divcss").css({"border":"dashed 2px #344E5F","font-size":"24px","color":"red","background-color":"#C8D7E1"}); |
A few points to notice
- This line of code is placed in the click event of the button.
- You have to separate multiple CSS properties by a comma.
- A semicolon is not used after the value as we do in the CSS style section.
In this example, a menu is displayed with initial CSS properties set in the style section with the bluish theme. As demo page loads, you can see three buttons that you can click to change the colors of the menu.
On the click event of each button, the $.css method is attached to change the color of links class, which hierarchy, in that case is: div ul li a.
See this demo online first:
See online demo and code
Following jQuery code is used in the script section:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script> $(document).ready(function(){ $(".chgcss").click(function(){ $(".men_ex ul li a").css({"background-color":"#3E5F74","color":"#fff","padding":"10px"}); }); $(".chgcssRed").click(function(){ $(".men_ex ul li a").css({"background-color":"#A80000","color":"#fff","text-decoration":"none"}); }); $(".chgcssGreen").click(function(){ $(".men_ex ul li a").css({"background-color":"#004000","color":"#eee","border-radius":"10px"}); }); }); </script> |
You may notice, the border-radius is kept 5px for the menu at the initial stage. If you click on the “Change to theme1” button, it remains the same.
That means, the properties that are used in the $.css method will replace the previous values while that are not used remain intact. So, the border-radius stayed the same.
Similarly, if you click at the “Green theme” button, the border-radius is changed in $.css method. Now it will remain same if you click red or first theme buttons because these buttons are not setting the border-radius property.
There is another button, Restore initial setting. Clicking this will return menu to its original style with the same properties as set in the <style> section of the head tag.
In that button, following script is used:
|
1 2 3 4 5 |
$(".reset").click(function(){ $(".men_ex ul li a").removeAttr('style'); }); |
So we can conclude a few points here:
- All the properties used in the initial stage (that are set at the style tag, inline or external CSS) remains the same unless you modify it in $.css method.
- If you change only a few properties out of all initial properties, the other properties will stay the same. For example, if text color was set as white with the black background and you changed the background to red. The color of the text will remain white.
- You may also use CSS 3 properties in $.css method like I used the border-radius property.
- The jQuery css method can be used to add and change the CSS properties in the specified elements.
- You may remove the properties added/modified by using the $.removeAttr method, as done by using the “Reset Default” button in the demo.
An example of using $.css in HTML table
In this demo, a table with initial CSS style is created with dummy data. To give it a variation, I have used check boxes instead of the buttons to call $.css jQuery method to add, change or remove CSS properties.
See online demo and code
As you click the first checkbox, “Add Header background and other properties”, it will add background-color in the table header. Also, the border-radius is added while the border is removed. The color property is changed what was set initially.
The table header is accessible by using following:
|
1 2 3 4 5 |
$("#addhcss").click(function(){ $(".demotbl th").css({"background-color":"#A80000","color":"#fff","border-radius":"6px","border":"none"}); }); |
Where demotbl is the main table class!
Similarly, no background color was given initially to <td>. As you click on the second checkbox to add a background, it will not only add background color but also increase the font-size, text-align and change the border properties as well.
Following jQuery code is used in the click event of the second checkbox to change CSS:
|
1 2 3 4 5 |
$("#addrowcss").click(function(){ $(".demotbl td").css({"background-color":"#FFB9B9","color":"#FF2D2D","border":"1px solid #A80000","font-size":"18px","text-align":"center"}); }); |
The last two checkboxes, in the second row, are to remove the properties added or changed by using the jQuery $.css method. Alternatively, you can say it will change CSS to default or initial state.
Note: I have only shown this demo for the understanding purpose. In pro websites, you should change/default by selecting and unselecting the same checkbox.
Using $.css with jQuery UI accordion
Not only, you may change CSS of simple elements like div, tables etc. but also other components of jQuery UI by using the $.css method.
In that demo, an accordion is created by using the jQuery UI library. Initially, the accordion is displayed with default CSS as used in the library with three panels.
After the accordion, two buttons are given to change the CSS of panels and content area. See the demo online with a little description after it:
See online demo and code
Quite a few properties are changed as you click “change header” and “change content” buttons. In the click events of buttons, the built-in UI accordion classes are used that overridden the default properties:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function(){ $(".panelcol").click(function(){ $(".ui-accordion .ui-accordion-header").css({"background":"#415765","color":"#fff","border":"1px solid #FDF8E4","display": "block","border-radius":"8px"}); }); $(".conprop").click(function(){ $(".ui-accordion .ui-accordion-content").css({"background":"#B3C4CE","color":"#000","border":"1px solid black", "border-top": "0","border-radius":"8px","width":"84%","margin-left":"1px"}); }); }); |
You can see, the ui-accordion .ui-accordion-header class will handle the header part of the accordion where background, text color, border, display and border-radius properties are used.
While the ui-accordion .ui-accordion-content deals with the content inside the accordion panels. A few properties of CSS are also changed by using the jQuery $.css method.
In the final demo, I will show you changing/adding the CSS properties in the Bootstrap navbar component.
For that, a navbar is created by using the Bootstrap libraries. It uses default classes that are built-in in the framework’s CSS.
By using the $.css method, I will show you how you can change a few properties. See the online demo first:
See online demo and code
The demo page is loaded with a default navbar style of Bootstrap. You can also see six Bootstrap buttons below the navigation bar. Each button is given a built-in class of navbar as well, that also define its color.
As you click on any button, the navbar’s theme is also changed which is matched to the color of the button. For example, clicking on the primary button will change the navbar theme to blue and danger to red and so on.
To accomplish that, $.css method of jQuery is used in the click event of each button. Look at this code in the head section:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<script> $(document).ready(function(){ $("#btnprimary").click(function(){ $(".navbar-default").css({"background":"#337AB7","color":"#fff","border-color":"#425766"}); $(".navbar-default .navbar-nav > li > a").css({"background":"#337AB7","color":"#d7e2e9","border-color":"#425766"}); }); $("#btndanger").click(function(){ $(".navbar-default").css({"background":"#D9534F","color":"#fff","border-color":"#125E6D"}); $(".navbar-default .navbar-nav > li > a").css({"background":"#D9534F","color":"#fff","border-color":"#425766"}); }); $("#btnwarning").click(function(){ $(".navbar-default").css({"background":"#F0AD4E","color":"#fff","border-color":"#425766"}); $(".navbar-default .navbar-nav > li > a").css({"background":"#F0AD4E","color":"#000","border-color":"#425766"}); }); $("#btninfo").click(function(){ $(".navbar-default").css({"background":"#5BC0DE","color":"#114453","border-color":"#114453"}); $(".navbar-default .navbar-nav > li > a").css({"background":"#5BC0DE","color":"#114453","border-color":"#114453"}); }); $("#btnsuccess").click(function(){ $(".navbar-default").css({"background":"#5CB85C","color":"#fff","border-color":"#214526"}); $(".navbar-default .navbar-nav > li > a").css({"background":"#5CB85C","color":"#d7e2e9","border-color":"#214526"}); }); $("#btndefault").click(function(){ $(".navbar-default").removeAttr('style'); $(".navbar-default .navbar-nav > li > a").removeAttr('style'); }); }); </script> |
You can see, in each button the navbar-default and navbar-default .navbar-nav > li > a classes are used in the $css method. These are built-in classes in Bootstrap framework’s CSS. I am just overriding the properties in the click event of each button.
For that demo, only a few properties are changed, however, there are many other properties that you can work with, for example, drop-down links are not changed in that demo. In pro website, this should be managed as well. Similarly, form’s classes can also be changed by using the css jQuery method.
You can see detail about other classes in its own chapter here.
The last button will turn the navbar into default theme, which is again done by using the removeAttr method of jQuery, as in above example. So it just removed any CSS style that is applied by clicking the buttons.