1

我正在尝试开发一个利用 CSS 值并修改它们的 jQuery 插件。然而，问题在于Firefox 和 Opera 似乎不喜欢跟踪属性 value 的单位。在Retrieving percent 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
4

1 回答 1

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 上

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

于 2013-05-06T20:36:54.713 回答