在 jQuery 中获取全局样式表的值

Question

当我在 HTML 页面范围内使用这样的样式表定义时

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

以下代码不返回 CSS 定义的宽度值：

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

在这个article 一个函数中，它显示检索正确的值，当我尝试这样做时，它并不能真正跨浏览器工作。所以我在 jQuery 中尝试过类似的东西但失败了。

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

我确实得到了绝对像素宽度，不是百分比值 27.5。 是否也可以检索百分比值？

备注： 与 SO 问题类似（但不相同）：get CSS rule's percentage value in jQuery。

Answer 1

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

参考get CSS rule's percentage value in jQuery

这是小提琴http://jsfiddle.net/jSGTs/

Answer 2

这就是我所做的。由于所有方法都没有真正可靠（跨浏览器等），我遇到了CSS parser/abstracter? How to convert stylesheet into object。

首先我打算使用一些成熟的 CSS 解析器，例如

1. JSCSSP
2. jQuery CSS parser

它们很强大，但也很重量级。最终我得到了我自己的小功能

// 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

当您需要全局样式表中定义的确切值时，您必须访问样式元素中的规则。
这在 jQuery 中没有实现。

IE：rules-collection
其他：CSSRuleList（IE8或9也可能支持，具体不能告诉你）

Answer 4

在 jQuery 中没有任何东西，甚至在 javascript 中也没有什么简单明了的东西。接受 timofey 的回答并运行它，我创建了这个函数，用于获取你想要的任何属性：

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

这里使用的技巧是隐藏其父级，获取计算的样式，然后取消隐藏父级。