read CSS property from stylesheet

Question

I am trying to access css property like this:

.box {
    position: absolute;
    background-color: red;
    height: 10px;
    width: 10px;
}

JS:

var height = $('.box').css('height');

I know, the above code is wrong and this actually doesn't work as .box is not available in the DOM.

Another thing that i tried:

var height = $("<span class='box'></span>").css('height');

My question is: how can I get the height of .box without having any element in the DOM with class box ?

This here will help you http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript — Mr. Alien, May 27 '13 at 18:42
You shouldn't want to do this. You're not using the tools right. Like using a hammer to maul a screw. — Halcyon, May 27 '13 at 18:45
@FritsvanCampen — It isn't a common thing to need, but there are times when it is useful to do. You can't really make that judgement fairly without knowing the reasons behind it. — Quentin, May 27 '13 at 18:48

Xotic750 · Answer 1 · 2013-05-27T23:50:02.223

On a modern browser you could use document.stylesheets, and the stylesheet would need to be in the original HTML and the source needs to match the Same Origin Policy, i.e. you can't inject the stylesheet from say a Chrome extension as it does not show in document.stylesheets

CSS

.box {
    position:absolute;
    background-color:red;
    height:10px;
    width:10px;
}

Javascript

function propertyFromStylesheet(selector, attribute) {
    var value;

    [].some.call(document.styleSheets, function (sheet) {
        return [].some.call(sheet.rules, function (rule) {
            if (selector === rule.selectorText) {
                return [].some.call(rule.style, function (style) {
                    if (attribute === style) {
                        value = rule.style.getPropertyValue(attribute);
                        return true;
                    }

                    return false;
                });
            }

            return false;
        });
    });

    return value;
}

console.log(propertyFromStylesheet(".box", "height"));

Output

10px

On jsfiddle

Greensock has written a cross-browser plugin that does the same thing. https://github.com/greensock/GreenSock-JS/blob/df55cb80d6f334875fcb5c3d43645b007df7f75d/src/uncompressed/plugins/CSSRulePlugin.js — fatlinesofcode, Oct 30 '15 at 10:03

score 0 · Answer 2 · answered May 27 '13 at 18:47

The only way you can get then without using a DOM element is by downloading the stylesheet and parsing the contents. You can also access the compiled stylesheet by going to document.stylesheets and finding the rule. You can also use window.getComputedStyle(element) and create an element such as document.createElement('div') and attach the '.box' className to it.

Keep in mind that doing any of this implies that the stylesheet is on the same domain and port of where your html file is.

score 0 · Answer 3 · answered May 27 '13 at 19:00

To get the computed height of an element as set in a stylesheet, it has to exists in the DOM. You solve this by creating an element, positioning it way off the visible screen, and appending it to the body (or anywhere really).

To get the height you can use .height(), or .innerHeight() to get the height without margins and borders, but including padding :

var elem = $('<span />', {'class':'box',
                          style:'position:fixed;top:-9999px'}).appendTo('body');

var height = elem.innerHeight();

elem.remove();

FIDDLE

There's usually no need to access and parse the stylesheet for this, except in really special cases, where you're not looking for something like an elements height, but for instance trying to check if some special style is set in a specific stylesheet etc.

read CSS property from stylesheet

3 Answers3

Linked