I have set the background color of a class using css, now I want to put it in a variable using jquery. Thanks
4 Answers
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)
-
1
$("<div>").appendTo("body").addClass("cm").css("background-color").remove()
– JashwantMar 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.– jahroyMar 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.– jahroyMar 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.– jahroyMar 22, 2013 at 23:08
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).
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");
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.
-
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.– AnthonyJan 28, 2010 at 22:10