jQuery - CSS Selectors Methods

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 the 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>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>
This will produce following result −
list item 1
list item 2
list item 3
list item 4
list item 5
list item 6
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.
Here is the syntax for the method −
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>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>
This will produce following result −
list item 1
list item 2
list item 3
list item 4
list item 5
list item 6
The width( val ) and height( val ) method can be used to set the width and height 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>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>
This will produce following result −
Following table lists down all the methods which you can use to play with CSS properties −
Return a style property on the first matched element.
Set a single style property to a value on all matched elements.
Set a key/value object as style properties to all matched elements.
Set the CSS height of every matched element.
Get the current computed, pixel, height of the first matched element.
Gets the inner height (excludes the border and includes the padding) for the first matched element.
Gets the inner width (excludes the border and includes the padding) for the first matched element.
Get the current offset of the first matched element, in pixels, relative to the document.
Returns a jQuery collection with the positioned parent of the first matched element.
Gets the outer height (includes the border and padding by default) for the first matched element.
Get the outer width (includes the border and padding by default) for the first matched element.
Gets the top and left position of an element relative to its offset parent.
When a value is passed in, the scroll left offset is set to that value on all matched elements.
Gets the scroll left offset of the first matched element.
When a value is passed in, the scroll top offset is set to that value on all matched elements.
Gets the scroll top offset of the first matched element.
Set the CSS width of every matched element.
Get the current computed, pixel, width of the first matched element.

    27 Lectures 
     1 hours 

 Mahesh Kumar

    27 Lectures 
     1.5 hours 

 Pratik Singh

    72 Lectures 
     4.5 hours 

 Frahaan Hussain

    60 Lectures 
     9 hours 

 Eduonix Learning Solutions

    17 Lectures 
     2 hours 

 Sandip Bhattacharya

    12 Lectures 
     53 mins

 Laurence Svekis
 Print
 Add Notes
 Bookmark this page