It is very easy to add css using jQuery. Lets understand this by different examples below.
Example 1:
Adding css for <li> tag
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<title>jQuery Basics</title> <script type="text/javascript" src="script/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function(){ $("li").css("border","2px solid red"); }) </script> </head> <body> <ul id="item1"> <li>List Item one</li> <li>List Item two</li> </ul> <p> Paragraph One </p> <p> Paragraph two</p> </body> </html> |
Output
Here you can notice that the css is applied for all the <li>.
Example 2:
Adding multiple style properties.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<title>jQuery Basics</title> <script type="text/javascript" src="script/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function(){ $("li").css({border: "2px solid red" , margin: "10px"}); }) </script> </head> <body> <ul id="item1"> <li>List Item one</li> <li>List Item two</li> </ul> <p> Paragraph One </p> <p> Paragraph two</p> </body> </html> |
Output
Here you can notice that the margin and border properties are applied for all the <li>.
Example 3 :
Adding css for a particular ID.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<title>jQuery Basics</title> <script type="text/javascript" src="script/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function(){ $("#item1").css("border","2px solid red"); }) </script> </head> <body> <ul id="item1"> <li>List Item one</li> <li>List Item two</li> </ul> <p> Paragraph One </p> <p> Paragraph two</p> </body> </html> |
Output
Here you can notice that css is applied for all the tags coming under the id ‘item 1’.
Leave a Reply