javascript - 如何准确地检索 Firefox 和 Opera 中的 CSS 属性？

Question

我正在尝试开发一个利用 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 中指定为百分比，或者如果指定为像素，我想将 CSS 属性作为百分比使用 javascript。除了 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

Answer 1

此示例使用的是 css width，但该原则可应用于任何可能在 %

中指定的属性

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

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