Get css value without DOM element

Question

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

Accepted Answer

Just create an element with that class name and inspect it. You don't even need to attach it to the DOM: ``` var $el = $('

'); 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 = $('

'); $el.css('color'); // Expected: "red", Actual: "" ```

Get css value without DOM element

Solution

Problem