如何获取级联样式值或确定是否计算了实际值？答案

【问题标题】：How to get cascaded style value or determine whether the actual value was computed?如何获取级联样式值或确定是否计算了实际值？
【发布时间】：2016-10-24 20:28:21
【问题描述】：

我需要获取一个元素的级联样式值（不是计算的），或者确定是否计算了实际值。

例如，如果我有一个带有 css 规则 width: 100% 的元素，我想获取值 100% 而不是实际的像素值，或者只是想知道实际值是计算出来的。

我知道我可以使用elem.currentStyle 获取它，并且我还在 Chrome 中找到了一种使用 document.defaultView.getMatchedCSSRules() 找到它的方法。

有人知道在其他浏览器中获取它的方法吗？

【问题讨论】：

你找到答案了吗？
鉴于getMatchedCSSRules() 已被删除，不使用开发人员工具来执行此操作将意味着您自己实现它。 this answer 有一个很好的开始，在 cmets 中有一些注意事项。

标签： javascript css cross-browser

【解决方案1】：

自己计算价值怎么样？查询所需元素的计算宽度和父元素的计算宽度，然后做一些数学运算以获得百分比值？ percentageValue = 100% * widthOfWanted / widthOfContainer

【讨论】：

是的，我认为这是最优雅的解决方案。查看this answer here 以了解有关单位转换的技术并根据您的需要实施它

【解决方案2】：

在这一点上，我认为在 IE 以外的浏览器中没有内置的方法可以做到这一点：getComputedStyle 将始终只返回这些属性的使用值，就像你说的那样。

【讨论】：

【解决方案3】：

// 本例中的css参数必须是css风格的字符串，不能是camelCase字符串。

function deepCss(who, css, ps){
    var sty, dv= document.defaultView;
    // IE8 and below
    if(document.body.currentStyle){
        sty= css.replace( /\-([a-z])/g, function(a, b){
            return b.toUpperCase();
        });
        return who.currentStyle[sty];
    }
    // everyone else
    if(dv){
        dv= document.defaultView.getComputedStyle(who, ps);
        return dv.getPropertyValue(css);
    }
    return '';
}

deepCss(document.body, 'background-color')

【讨论】：

对于 chrome 和 firefox，它将返回实际分配的值，而不是定义的值，即对于具有 'width:100%' 的元素，它将返回实际计算的像素，而不是定义的 '100 %' 值。

【解决方案4】：

最好的方法是使用独立于浏览器的 api 库，比如 jQuery

$(element).css('width') // jquery has a single function that returns a consistent value no matter which browser is in use.

【讨论】：

我知道 jquery。它返回以像素为单位的值 - 它不返回设置的相对值。对于 width:100% 的元素，它不会返回 '100%'