The jQuery library supports nearly all of the selectors included in Cascading Style Sheet (CSS) specifications 1 through 3, as outlined on the World Wide Web Consortium's site.
Using JQuery library developers can enhance their websites without worrying about browsers and their versions as long as the browsers have JavaScript enabled.
Most of the JQuery CSS Methods do not modify Content of the jQuery object and they are used to apply CSS properties on DOM elements.
This is very simple to apply any CSS property using JQuery method css( PropertyName, PropertyValue ).
Here is the syntax for the method:
selector.css( PropertyName, PropertyValue );
Here you can pass PropertyName as a javascript string and based on its value, PropertyValue could be string or integer.
Following is an example which adds font color to the second list item.
<html> <head> <script type="text/javascript" src="../../js/jquery-2.2.0.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("li").eq(2).css("color", "red"); }); </script> </head> <body> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </body> </html>
You can apply multiple CSS properties using a single JQuery method CSS( {key1:val1, key2:val2....). You can apply as many properties as you like in a single call.
selector.css( {key1:val1, key2:val2....keyN:valN})
Here you can pass key as property and val as its value as described above.
Following is an example which adds font color as well as background color to the second list item.
<html> <head> <script type="text/javascript" src="../../js/jquery-2.2.0.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("li").eq(2).css({"color":"red", "background-color":"green"}); }); </script> </head> <body> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </body> </html>
The width( val ) and height( val ) method can be used to set the width and hieght respectively of any element.
Following is a simple example which sets the width of first division element where as rest of the elements have width set by style sheet:
<html> <head> <script type="text/javascript" src="../../js/jquery-2.2.0.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("div:first").width(100); $("div:first").css("background-color", "blue"); }); </script> <style> div{ width:70px; height:50px; float:left; margin:5px; background:red; cursor:pointer; } </style> </head> <body> <div></div> <div>d</div> <div>d</div> <div>d</div> <div>d</div> </body> </html>
Following table lists down all the methods Related with CSS properties:
Your Query was successfully sent!