• jQuery Video Tutorials

jQuery - CSS Properties

jQuery provides css() method to manipulate CSS properties of the matched elements.

JQuery css() method does not modify the content of the jQuery object but they are used to get and set CSS properties on DOM elements.

jQuery - Get CSS Properties

jQuery css() method can be used to get the value of a CSS property associated with the first matched HTML element. Following is the syntax of the css() method:

$(selector).css(propertyName);

jQuery understands and returns the correct value for both css( "background-color" ) and css( "backgroundColor" ).

Example

Let's try the following example and verify the result. This should return the background color of the first matched <div>.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         alert("Background color = " + $("div").css("background-color"));
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Click the below button to see the result:</p>

   <div style="background-color:#9c9cff;">Blue</div>
   <div style="background-color:#93ff93;">Green</div>

   <button>Get CSS Property</button>
</body>
</html>

jQuery - Set CSS Properties

jQuery css() method can be used to set the value of one or more CSS properties associated with the matched HTML element. Following is the syntax of the css() method:

$(selector).css(propertyName, value);

Here both the parameters are required, propertyName represents a CSS property name where as value represents a valid value of the property.

Example

Let's try the following example and verify the result. Here we will take the color of the first matched <div> and will change the text color of all <p> using the div background-color.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         var color = $("div").css("background-color");
         $("p").css("color", color);
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Click the below button to see the result:</p>

   <div style="background-color:#9c9cff;">Blue</div>
   <div style="background-color:#93ff93;">Green</div>

   <button>Set CSS Property</button>
</body>
</html>

jQuery - Set Multiple CSS Properties

You can apply multiple CSS properties on the matched elements using a single jQuery method css(). You can apply as many properties as you like in a single call.

Following is the syntax of the css() method to set multiple CSS properties:

$(selector).css({propertyName1:value1, propertyName2:value2,...});

Example

Let's try the following example and verify the result. Here we will set background color of all the <div> to "#fb7c7c;" and font-size to 25px.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("div").css({"background-color":"#fb7c7c", "font-size": "25px"});
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Click the below button to see the result:</p>

   <div style="background-color:#9c9cff;">Blue</div>
   <div style="background-color:#93ff93;">Green</div>

   <button>Set CSS Property</button>
</body>
</html>

jQuery HTML/CSS Reference

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.

Advertisements