5

I have set the background color of a class using css, now I want to put it in a variable using jquery. Thanks

0

4 Answers 4

5

You may have to apply that class to a temporary element, and then extract the bgcolor of that element.

.cm { background-color:#990000 }

--

// creating an empty element and applying our class to it
var bgcolor = $("<div>").appendTo("body").addClass("cm").css("background-color");
alert(bgcolor); // rgb(153, 0, 0)
4
  • 1
    $("<div>").appendTo("body").addClass("cm").css("background-color").remove()
    – Jashwant
    Mar 19, 2013 at 6:28
  • I edited this answer so it demonstrates that there's actually no need to append the dummy element to the document. You can simply create a temporary div, add a style to it, and extract the background color.
    – jahroy
    Mar 22, 2013 at 2:57
  • 1
    ... and I rolled back my edit. Only Firefox is able to determine the background color from a dummy element that is not part of the DOM.
    – jahroy
    Mar 22, 2013 at 20:55
  • I should have known better than to edit the answer before testing thoroughly... at least I eventually tested my own code and caught it! For the record, if the dummy element is not part of the DOM, IE9 will return 'transparent' and Chrome will return '' in the above example.
    – jahroy
    Mar 22, 2013 at 23:08
3

If there is an element on the page using that class, you can do something like:

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

But if nothing is using the class, I'm not familiar with any way to grab the color save from loading the .css file and parsing it in JavaScript (less than ideal).

1
  • No it's not there on the page
    – halocursed
    Jan 28, 2010 at 22:01
1

The problem is that jquery can't traverse the actual stylesheet (as far as I know), so if you have an element with two classes, you would have no way of knowing whether the color it returned was for the class you wanted or the other one. For instance:

.big { background-color: yellow; }

.mean { background-color: blue; }

The first one would be blue, but if you request the background color using:

 $(".big").css("background-color");

You would get blue, even though that class is set to yellow, since the first element is technically of the class big but it has a blue background.

I like Jonathan Sampson's idea. Create an element, make it invisible or offscreen, but give it an ID and the class you are wondering about. Then check the background color of that ID instead of checking by class:

 $("#colortest").css("background-color");
0
var $tmp = $('<a class="classname"></a>');
$('body').append($tmp).hide();
var color = $('.classname').css('background-color');
$tmp.remove();

EDIT: Applies the class to a hidden element.

1
  • See my comment regarding class conflict. With your example, there is no assurance that the element jquery grabs the color from is the one you created. I'd go with `var $tmp = $('<a class="classname" id="colortest"></a>'); and then set the var color to the ID.
    – Anthony
    Jan 28, 2010 at 22:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.