JQuery Style Properties


The css() method


This method provides a simple way to add styles to HTML elements that haven't been or can't easily be identified in a stylesheet (i.e. inline styles).


Getting a CSS Property Value


Simply transfer the property name as a parameter to the css() method to get the computed value of an element's CSS property. The basic syntax is as follows:



$(selector).css("propertyName");


When a <div> element is pressed, the computed value of the CSS background-color property of that element is retrieved and displayed. 



<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div{
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 10px;
}
</style>
<script>
$(document).ready(function(){
  $("div").click(function(){
      var color = $(this).css("background-color");
      $("#result").html(color);
  });
});
</script>
</head>
<body>

<div style="background-color:rgb(255, 165, 0);"></div>
<div style="background-color:rgb(238, 130, 238);"></div>
<div style="background-color:rgb(139,205,50);"></div>
<div style="background-color:rgb(255, 0, 0);"></div>
<p>The clicked DIV element's computed background-color property value is:<b id="result"></b></p>

</body>
</html>
Live Demo!


Setting a single CSS Property and Value


For setting a single CSS property for the components, the css() method may take a property name and value as separate parameters. The basic syntax is as follows: 



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


When the <div> elements are pressed, the CSS background-color property of the <div> elements is set to the color value blue. 



<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.box{
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid #cdcdcd;
  margin: 10px;
}
</style>
<script>
$(document).ready(function(){
  $(".box").click(function(){
      $(this).css("background-color", "blue");
  });
});
</script>
</head>
<body>
    
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

</body>
</html>
Live Demo!


Setting the Multiple CSS Properties and Values


The css() method can also be used to set multiple CSS properties. The following is the basic syntax for setting multiple properties for elements: 



$(selector).css({"propertyName":"value", "propertyName":"value", ...});


Example: This will set the background-color and padding CSS properties for the selected elements. 



<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      $("p").css({"background-color": "yellow", "padding": "10px"});
  });
});
</script>
</head>
<body>
    
<h1>This is a heading</h1>
<p style="background-color:orange;">This the first paragraph.</p>
<p style="background-color:#ee82ee;">This is the second paragraph.</p>
<p style="background-color:rgb(139,205,50);">None more paragraph.</p>
<p>Another last paragraph here.</p>
<button type="button">Lets add the CSS Styles</button>

</body>
</html>
Live Demo!