jQuery CSS, Styling & Dimensions

Introduction to CSS, Styling and Dimensions

  • jQuery library supports all the selectors which are included in the cascading style sheet(CSS).
  • The developers can enhance the websites without worrying about the browsers and their versions as long as the browsers have javascript enabled.
  • jQuery library is used to apply the CSS properties on the DOM elements.

Applying the CSS properties

It is very easy to apply the CSS property by using the jQuery method.

Syntax:
selector.css (PropertyName, PropertyValue);
Where,
     PropertyName: javascript string.
     PropertyValue: any string or integer.

Example : Applying CSS properties to DOM elements

<html>
<head>
     <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
     </script>
     <script type="text/javascript" language ="javascript">
     $(document).ready(function()
     {
          $("li").eq(1).css("background-color","blue");
     });
     </script>
</head>
<body>
     <div>
     <ul>
          <li> Reema </li>
          <li> Seema </li>
          <li> Rajesh </li>
          <li> Anjali </li>
          <li> Sunil </li>
          <li> Rohan </li>
     </ul>
     </div>
</body>
</html>


Output:
  • Reema
  • Seema
  • Rajesh
  • Anjali
  • Sunil
  • Rohan

Applying Multiple CSS properties

Multiple CSS properties can be passed in a single jQuery.

Syntax:
selector.css({key1:val1,key2:val2........keyN:valN})

Example : Applying multiple CSS properties

<html>
<head>
     <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
     </script>
     <script type="text/javascript" language ="javascript">
     $(document).ready(function()
     {
          $("li").eq(3).css({"color":"red","background-color":"yellow"});
     });
     </script>
</head>
<body>
     <div>
     <ul>
          <li> Reema </li>
          <li> Seema </li>
          <li> Rajesh </li>
          <li> Anjali </li>
          <li> Sunil </li>
          <li> Rohan </li>
     </ul>
     </div>
</body>
</html>


Output:
  • Reema
  • Seema
  • Rajesh
  • Anjali
  • Sunil
  • Rohan

Dimensions

The CSS methods width(val) and height(val) are used to set the dimensions of an element.

Example

Setting the width of the first division element while the rest of the elements have their width set by the CSS.

<html>
<head>
     <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
     </script>
     <script type="text/javascript" language ="javascript">
     $(document).ready(function()
     {
          $("div:first").width(80);
          $("div:first").css("background-color","grey");
     });
     </script>
     <style>
          div{width:50px; height:20px; float:center; margin:3px; background:red; cursor:pointer;}
     </style>
</head>
<body>
          <div></div>
          <div>One</div>
          <div>Two</div>
          <div>Three</div>
</body>
</html>


Output:
dimensions

jQuery CSS methods

Following table has all the methods of jQuery CSS with the CSS properties:

MethodsDescription
css(name)A style is returned on the first matched element.
css(name,value)A single style value is set on all the matched elements.
css(properties)A key/value object is set as style properties to all matched elements.
height(val)It gets the current computed, pixel, height of the first matched element.
innerHeight()It gets the inner height i.e. the border is excluded and the padding is included for the first matched element.
innerWidth()It gets the inner width i.e. the border is excluded and the padding is included for the first matched element.
offset()A jQuery collection is returned with the positioned parent of the first matched element.
outerHeight([margin])It gets the outer height i.e. it includes the border and exclude the padding for the first matched element.
outerWidth([margin])It gets the outer width i.e. it includes the border and exclude the padding for the first matched element.
position()It gets the top and left position of an element relative to its offset parent.
scrollLeft(val)The scroll left offset is set when a value is passed in.
▲