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 following code does NOT return the value of the CSS defined width:

document.getElementById("sideBar").style.width;

In this article a function it is shown retrieving the correct value, when I try to do so it dos not really work cross browser. So I have tried something similar in jQuery but failed.

$("#sideBar").css("width'"); // 1st trial
$("#sideBar").width(); // 2nd trial

I do get the absolute pixel width, not he percentage value 27.5. Is there a way to retrieve the percentage value as well?

Remark: Similar (but not the same) to SO Question: get CSS rule's percentage value in jQuery.

Take a look at http://stackoverflow.com/questions/744319/get-css-rules-percentage-value-in-jquery/744450#744450 — shesek, Aug 20 '11 at 11:40
Yes, it is very similar! But compared to the answers there, the approach of the above mentioned article seems to be more straight forward. Was just curious, if there is something similar in jQuery already. — Horst Walter, Aug 20 '11 at 11:45

score 2 · Answer 1 · edited May 23 '17 at 12:33

2

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/

edited May 23 '17 at 12:33

Community

1
1

answered Aug 20 '11 at 11:33

Rafay

30,950
5
68
101

This is a kind of reverse calculation, which fails in my particular scenario. I use a min-width and the percentage. As long as the min-width does not apply, all is fine, in the case of the min-width leading to a different percentage this calculation does not give me the original CSS value. Helpful answer anyway, thanks! – Horst Walter Aug 20 '11 at 11:39

score 2 · Answer 2 · edited May 23 '17 at 12:19

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

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;
};

Surely this is going to be rather slow when calling it a couple of times on a page? It would probably be better to do this process once on page load (or the first time the method is called) and then save the results into an array for referencing at a later point. — dalemac, Apr 26 '14 at 15:30

score 1 · Answer 3 · answered Oct 03 '16 at 20:44

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.

score 1 · Accepted Answer · answered Aug 20 '11 at 11:53

1

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)

answered Aug 20 '11 at 11:53

Dr.Molle

116,463
16
195
201

This is the basis of the above article as far as I can tell, thansk for the hint. http://www.javascriptkit.com/dhtmltutors/dhtmlcascade4.shtml – Horst Walter Aug 20 '11 at 11:56
Yep, this is the right approach, see code example below http://stackoverflow.com/questions/7131462/getting-values-of-global-stylesheet-in-jquery/7132264#7132264 – Horst Walter Aug 20 '11 at 14:15

Getting values of global stylesheet in jQuery

4 Answers4

Linked