jquery : How to use the .css() method

Question

I have the following html/javascript stuff

<html>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).mouseup(function(event) {
    $("body").append("Entering function...");
    var element = event.target;
    var color = element.css("background-color");
    $("body").append("That div is <span style='color:" + color + ";'>" + color + "</span>.");
});
</script>

<body>
<div style="background-color:#ff1111;width:100px;height:100px;"></div>
<div style="background-color:#223388;width:100px;height:100px;"></div>
</body>
</html>

When running in firebug with a breakpoint at "var color = element.css("background-color");" it tells me that css is undefined.

What am I doing wrong here?

JaredPar · Accepted Answer · 2012-02-14 18:43:28Z

5

The reason why is element is a DOM element and not a jQuery object. To use the css function you need a jQuery object.

var color = $(element).css('background-color');

answered Feb 14, 2012 at 18:43

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicola Peluchetti · Accepted Answer · 2012-02-14 18:44:13Z

1

You should do

 var color = $(element).css("background-color");

answered Feb 14, 2012 at 18:44

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

Comments

sazh · Accepted Answer · 2012-02-14 18:43:58Z

0

Try var element = $(event.target) instead. The css method is a jQuery method

answered Feb 14, 2012 at 18:43

sazh

1,84216 silver badges20 bronze badges

Comments

Matthew · Accepted Answer · 2012-02-14 18:43:58Z

0

Try doing:

var element = $(event.target);

answered Feb 14, 2012 at 18:43

Matthew

26k9 gold badges86 silver badges118 bronze badges

Comments

Sam Arul Raj T · Accepted Answer · 2012-02-14 19:02:09Z

0

To add more in line styling this code will help a lot

var color = $(element).css({'color':'red','background-color':'blue'});

answered Feb 14, 2012 at 19:02

Sam Arul Raj T

1,77017 silver badges23 bronze badges

Comments

Robin Maben · Accepted Answer · 2012-02-14 19:04:26Z

0

The use of "event" as parameter shrouds the meaning of the global event object.

Use e or any other valid variable name in your callback method.

$(document).mouseup(function(e) {
...

    var color = $(e.target).css("background-color");
    alert("Color is " + color);
});

answered Feb 14, 2012 at 19:04

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

Collectives™ on Stack Overflow

jquery : How to use the .css() method

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related