Get css value without DOM element

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.

---

The above link no longer works. The following is a screenshot of the blog-article, captured by the internet archive wayback in 2008.

The function basically iterates over all styles of all stylesheets and provides the ability to modify / delete them.
Please note that this cannot be recommended, since most modern stylesheets are too large to make this an efficient operation.

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.

---

Edit: as mentioned in the comments, this approach does not always work as expected (eg inherited css values not defined on .classname explicitly, selector specificity above .classname, etc).

For example the following fails due to #foo increasing the selector specificity beyond that of a standalone .bar:

css:

#foo .bar { color: red; }

js:

var $el = $('<div class="bar"></div>');
$el.css('color'); // Expected: "red", Actual: ""

You could go (this also works in chrome):

var $elem = $('<div id="foo"></div>').appendTo('body'),
    value = $elem.css('margin-top');

$('#foo').remove();