jQuery CSS Method


In this tutorial, The jQuery CSS() method used to get or set the value of the CSS property of the specified elements.

Get CSS Property value

If you want to only get the property value then you can only pass the property name so it will return the property value.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var data = $("p").css("color");
       console.log(data); 
  });
});
</script>
</head>
<body>
 <p style="color:red;">This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

Set CSS Property value

If you want to set single CSS property for the elements then you can use the following syntax CSS property.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color","blue");
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

Set Multiple CSS Properties and Values

If you want to set multiple CSS properties for the elements then you can use the following syntax CSS property.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"color":"blue","border":"1px solid #000"});
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>