如何在 Firefox 和 Opera 中准确检索 CSS 属性的编写方式？答案

【问题标题】：How do I retrieve CSS property in Firefox and Opera exactly how it's written?如何在 Firefox 和 Opera 中准确检索 CSS 属性的编写方式？
【发布时间】：2013-05-06 20:18:42
【问题描述】：

我正在尝试开发一个利用 CSS 值并修改它们的 jQuery 插件。然而，问题在于Firefox and Opera seem to not like keeping track of the units of the property's value。在Retrieving percentage CSS values (in firefox) 中，提问者想要获取 CSS 属性的百分比。如果 CSS 属性在其 CSS 中指定为百分比，或者如果指定为像素，我想使用 javascript 将 CSS 属性作为百分比来获取。我不想依赖 jQuery 以外的任何库，尽管它似乎也不能做我想要的。

CSS

#element{
    margin-left: 10%;
}

Javascript

$('#element').css('margin-left'); // returns 29px in Firefox, but 10% in Chrome
getComputedStyle(document.getElementById('element')).getPropertyValue('margin-left'); // returns 29px in Firefox, but 10% in Chrome

【问题讨论】：

@Xotic750 Firefox 和 Opera 不使用 getMatchedCSSRules(element)，所以我必须使用 getComputedStyle(element)。但这不是问题。问题是属性的返回值在不同的浏览器中是不同的。 Firefox “丢弃” CSS 中指定的原始值并（通常）将其转换为像素。
你想从内联 CSS 或外部样式表中获取宽度值吗？还是两者兼而有之？
@SalmanA 两者。它需要从未知来源检索。

标签： javascript jquery css firefox opera

【解决方案1】：

这个例子使用的是csswidth，但是原理可以应用到任何可以在%中指定的属性

CSS

.oneThirds {
    width: 25%;
    background-color: red;
}
.half {
    width: 50%;
    background-color: green;
}
.twoThirds {
    width: 75%;
    background-color: yellow;
}

HTML

<div class="oneThirds">One third</div>
<div class="half">Half</div>
<div class="twoThirds">two thirds</div>

Javascript

var elements = document.getElementsByTagName("div");

Array.prototype.forEach.call(elements, function (element) {
    var parentStyle = window.getComputedStyle(element.parentNode);
    var elementStyle = window.getComputedStyle(element);
    var widthPercent = (parseFloat(elementStyle.width) / parseFloat(parentStyle.width)) * 100;

    console.log(widthPercent);
});

输出

25
50
75

开启jsfiddle

在某些浏览器上，您可能需要对浮点数进行一些舍入。

【讨论】：

抱歉，这不是我要找的。我不想将所有内容都转换为百分比。我想要做的是获得原生 CSS 规则。例如它在 CSS 中被指定为 20% 并且会给你一个 20% 的返回值。如果指定为 20px，则返回 20px。
那么我想你需要在你的问题中明确 100%。
没问题，但我担心你可能会不走运。