Getting values of global stylesheet in jQuery

Question

When I use a style sheet definition like this on HTML page scope

#sideBar {
  float: left;
  width: 27.5%;
  min-width: 275;
  ... 
}

the f

Answer 1

var width = ( 100 * parseFloat($("#sideBar").css('width')) / parseFloat($("#sideBar").parent().css('width')) ) + '%';

reference get CSS rule's percentage value in jQuery

here is the fiddle http://jsfiddle.net/jSGTs/

Answer 2

Here is what I have done. Since all approaches did no really work reliable (cross browser etc.), I came across CSS parser/abstracter? How to convert stylesheet into object .

First I was about to use some fully blown CSS parsers such as

1. JSCSSP
2. jQuery CSS parser

which are powerful, but also heavyweight. Eventually I ended up with my own little function

// Get the original CSS values instead of values of the element.
// @param {String} ruleSelector
// @param {String} cssprop
// @returns {String} property of the style
exports.getCssStyle = function (ruleSelector, cssprop) {
    for (var c = 0, lenC = document.styleSheets.length; c < lenC; c++) {
        var rules = document.styleSheets[c].cssRules;
        for (var r = 0, lenR = rules.length; r < lenR; r++) {
            var rule = rules[r];
            if (rule.selectorText == ruleSelector && rule.style) {
                return rule.style[cssprop]; // rule.cssText;
            }
        }
    }
    return null;
};

Answer 3

When you need the exact value as defined in the global stylesheet you have to access the rules within the style-element.
This is not implemented in jQuery.

IE: rules-collection
Others: CSSRuleList (May be supported by IE8 or 9 too, can't tell you exactly)

Answer 4

There's nothing in jQuery, and nothing straightforward even in javascript. Taking timofey's answer and running with it, I created this function that works for getting any properties you want:

// gets the style property as rendered via any means (style sheets, inline, etc) but does *not* compute values
// domNode - the node to get properties for 
// properties - Can be a single property to fetch or an array of properties to fetch
function getFinalStyle(domNode, properties) {
    if(!(properties instanceof Array)) properties = [properties]

    var parent = domNode.parentNode
    if(parent) {
        var originalDisplay = parent.style.display
        parent.style.display = 'none'
    }
    var computedStyles = getComputedStyle(domNode)

    var result = {}
    properties.forEach(function(prop) {
        result[prop] = computedStyles[prop]
    })

    if(parent) {
        parent.style.display = originalDisplay
    }

    return result
}

The trick used here is to hide its parent, get the computed style, then unhide the parent.