jQuery css()

❮ Previous Next ❯

jQuery css() Method

The css() method sets or returns one or more inline style properties for the selected elements.

While adding and removing classes is cleaner, sometimes you need to dynamically calculate exact pixel values or colors.

Getting a CSS Property

To return the value of a specified CSS property, use this syntax: css("propertyname");

This will read the computed style directly from the first matched element.

Get CSS Property:

$("button").click(function(){
  alert("Background color = " + $("p").css("background-color"));
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <p style="background-color:#ff0000; padding:20px; color:white;">This is a red paragraph.</p>
  <button>Return background-color</button>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      alert("Background color = " + $("p").css("background-color"));
    });
  });
  </script>
</body>
</html>

Setting a Single CSS Property

To set a specified CSS property, you pass both the property name and the new value.

Syntax: css("propertyname", "value");

This will apply the style to ALL matched elements on the page.

Set Single Property:

$("button").click(function(){
  $("p").css("background-color", "yellow");
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <p style="background-color:#ff0000; padding:10px;">This is a paragraph.</p>
  <p style="background-color:#00ff00; padding:10px;">This is another paragraph.</p>
  <button>Set background-color to yellow</button>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").css("background-color", "yellow");
    });
  });
  </script>
</body>
</html>

Setting Multiple CSS Properties

To set multiple CSS properties at the exact same time, you pass a JSON object.

Syntax: css({"propertyname":"value", "propertyname":"value", ...});

Set Multiple Properties:

$("button").click(function(){
  $("p").css({
    "background-color": "yellow", 
    "font-size": "200%"
  });
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <p>This is a paragraph.</p>
  <button>Apply multiple styles</button>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").css({"background-color": "yellow", "font-size": "200%"});
    });
  });
  </script>
</body>
</html>

Exercise 1 of 2

If you call the css() method with only one parameter (the property name), what does it do?

It returns the current value of that CSS property. It deletes that CSS property from the element.

Exercise 2 of 2

What format must you use to pass multiple CSS properties into the css() method at once?

A comma-separated string A JavaScript Object with curly braces {}

❮ Previous Next ❯

jQuery Basics

jQuery Effects

jQuery HTML

jQuery Traversing

jQuery AJAX

jQuery Misc