Get css value without DOM element

Question

Hi all,

I am wondering if there is a way to get css value from stylesheet file when there is no element in the DOM using it? I am using jQuery and I use selector $(".classname").css() to get the values. But with the case "classname" is not in any element, what to do to get the value" Thanks

Answer 1

You have to parse the styles from document.styleSheets.

Answer 2

See http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript which presents a cross-browser approach to getting and adding css dynamically.

It works with document.styleSheets and both IE's .rules and everyone else's .cssRules

It also has the advantage of being somewhat abstracted so you don't need to worry about the details.

Answer 3

Just create an element with that class name and inspect it. You don't even need to attach it to the DOM:

var $el = $('<div class="classname"></div>');
var opacity = $el.css('opacity') // or whatever

Even though $el is not actually present in the DOM, you still get access to all of its style properties.