Find out if element has a declared value

Question

I'd like to add a method to a module (think web-component) that detects whether a height has been set to its root element and if not - calculates its height based on other factors.

This module has some absolute positioning and other 'fancy' stuff so normal flow is out of the question.

I was thinking of looping through document.styleSheets and checking for the id or class of the root element in the selectorText of each cssRule then parsing the cssText or looking for a non-empty key of 'height' inside the style object.

Is there a better (or standard) way of doing this?

PS - I might have just solved it while formulating the question, so if you run into the same issue - here ya go!

Answer 1

Here's a pretty crude implementation:

isHeightSet: function () {
    var id = this.elements.root.id,
        _isHeightSet = false; // the crude part ;-)

    // go through stylesheets
    _.each(document.styleSheets, function(styleSheet) {

        // go through rules
        _.each(styleSheet.cssRules, function(cssRule) {

            // if selectorText contains our id
            if (cssRule.selectorText && cssRule.selectorText.indexOf(id) !== -1) {

                // check if the height is set
                if (cssRule.style.height && 
                   (cssRule.style.height !== 'auto' && 
                    cssRule.style.height !== 'inherit')) {

                    // keep on hacking!
                    _isHeightSet = true;
                }
            }
        });
    });

    return _isHeightSet;
}

Can probably be more robust but seems to work fine.