jQuery API

.css()

Categories: CSS | Manipulation > Style Properties
Contents:

.css( propertyName ) Returns: String

Description: Get the value of a style property for the first element in the set of matched elements.

  • version added: 1.0.css( propertyName )

    propertyNameA CSS property.

The .css() method is a convenient way to get a style property from the first matched element, especially in light of the different ways browsers access most of those properties (the getComputedStyle() method in standards-based browsers versus the currentStyle and runtimeStyle properties in Internet Explorer) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the float property as styleFloat, while W3C standards-compliant browsers refer to it as cssFloat. The .css() method accounts for such differences, producing the same result no matter which term we use. For example, an element that is floated left will return the string left for each of the following three lines:

  1. $('div.left').css('float');
  2. $('div.left').css('cssFloat');
  3. $('div.left').css('styleFloat');

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css('background-color') and .css('backgroundColor').

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

Example:

To access the background color of a clicked div.

<!DOCTYPE html>
<html>
<head>
  <style>
div { width:60px; height:60px; margin:5px; float:left; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	
<span id="result">&nbsp;</span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>

<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
  var color = $(this).css("background-color");
  $("#result").html("That div is <span style='color:" +
                     color + ";'>" + color + "</span>.");
});

</script>
</body>
</html>

Demo:

.css( propertyName, value ) Returns: jQuery

Description: Set one or more CSS properties for the set of matched elements.

  • version added: 1.0.css( propertyName, value )

    propertyNameA CSS property name.

    valueA value to set for the property.

  • version added: 1.4.css( propertyName, function(index, value) )

    propertyNameA CSS property name.

    function(index, value)A function returning the value to set. Receives the index position of the element in the set and the old value as arguments.

  • version added: 1.0.css( map )

    mapA map of property-value pairs to set.

As with the .attr() method, the .css() method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single map of key-value pairs (JavaScript object notation).

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) and .css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'}). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.

As with .attr(), .css() allows us to pass a function as the property value:

$('div.example').css('width', function(index) {
  return index * 50;
});

This example sets the widths of the matched elements to incrementally larger values.

Examples:

Example: To change the color of any paragraph to red on mouseover event. 

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	
  <p>Just roll the mouse over me.</p>

  <p>Or me to see a color change.</p>
  
<script>
  $("p").mouseover(function () {
    $(this).css("color","red");
  });
</script>
</body>
</html>

Demo:

Example: To highlight a clicked word in the paragraph. 

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; font-weight:bold; cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	
<p>
  Once upon a time there was a man
  who lived in a pizza parlor. This
  man just loved pizza and ate it all 
  the time.  He went on to be the
  happiest man in the world.  The end.
</p>
<script>
  var words = $("p:first").text().split(" ");
  var text = words.join("</span> <span>");
  $("p:first").html("<span>" + text + "</span>");
  $("span").click(function () {
    $(this).css("background-color","yellow");
  });

</script>
</body>
</html>

Demo:

Example: To set the color of all paragraphs to red and background to blue: 

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:green; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	
  <p>Move the mouse over a paragraph.</p>
  <p>Like this one or the one above.</p>

<script>
  $("p").hover(function () {
    $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
  }, function () {
    var cssObj = {
      'background-color' : '#ddd',
      'font-weight' : '',
      'color' : 'rgb(0,40,244)'
    }
    $(this).css(cssObj);
  });
</script>
</body>
</html>

Demo:

Example: Increase the size of a div when you click it: 

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width: 20px; height: 15px; background-color: #f33; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	
  <div>click</div>
  <div>click</div>

<script>
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }

    });
  });
</script>
</body>
</html>

Demo:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for .css() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • Also missing from this new documentation (unless it's changed in the latest version of jQuery) is the fact that if you pass in an empty string for a value to .css(property, value) it will remove the style property from the element. If that functionality has changed, please reply to this to let me know.
  • I notice that when you attempt to set the value of an style attribute for an attribute that doesn't exist, IE will create the attribute and store the value. Firefox simply ignores the attempt to set the value on a non-existent attribute and therefore after attempting to read back from the attribute after setting it, it will always return an empty string "".
  • I noticed that when retrieving style values, IE will return null if the style was never set but Firefox will return an empty string "". Is there anything in JQuery that can easily test for the absence of a value? I end up writing statements that need to check for both null and "" and this gets tedious.
  • The fact that `this` is set to the current DOM element in the setter function should be mentioned.
  • Bob
    Is there a way to add !important to the style declarations added using .css()? I just tried it and using the obvious (for example) .css({fontSize: '0 !important'}) and the style was not even applied, while just doing .css({fontSize: '0'}) does apply the style.
  • If you have a background image, and want to use a rollover, i made the following: Name your background images with blablabla-off.png or blablabla-on.png. Then you only set the class "box" to the items you want the rollover to happen

    $(".box").mouseenter(function() {
    $(this).css({ background: $(this).css("background-image").replace("-off.", "-on.") + ' no-repeat' });
    });

    $(".box").mouseleave(function() {
    $(this).css({ background: $(this).css("background-image").replace("-on.", "-off.") + ' no-repeat' });
    });
  • Jonathan
    If you really need to use jQuery to achieve that effect, jQuery's .hover() method is simpler.

    $(".box").hover(function(){
    //code for mouseover goes here
    },
    function(){
    //code for mouseleave goes here
    });

    That being said, I will echo Ben Hollis in saying that .box:hover in your CSS will achieve the same effect in all major browsers except IE6 and lower without requiring the use of javascript at all.
  • Ben Hollis
    I wouldn't recommend that - why not just change the background image in CSS by adding and removing a class? Or use :hover in your CSS and avoid JS altogether.
  • The last example seems to have wrong source code (same as previous one).