如何在Firefox和Opera中检索CSS属性如何编写？

我想开发一个利用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的百分比形式表示CSS属性。我不想依赖jQuery以外的任何库，尽管它似乎无法做到我想要的。如何在Firefox和Opera中检索CSS属性如何编写？

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

来源

2013-05-06 Andrew

它没有真正做到这一点，你必须通过使用元素的像素值和父元素的像素值来计算百分比，以获得百分比。 – adeneo 2013-05-06 20:21:43

@ Xotic750 Firefox和Opera不使用getMatchedCSSRules（element），所以我必须使用getComputedStyle（element）。但这不是问题。问题是属性的返回值在不同的浏览器中是不同的。 Firefox“扔掉”CSS中指定的原始值，并且（通常）将其转换为像素。 – Andrew 2013-05-06 20:24:57

你想从内联CSS或外部样式表中获取宽度值吗？或两者？ – 2013-05-06 20:42:17

这个例子是使用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-06 20:36:54 Xotic750

对不起，但这不是我要找的。我不是想把所有东西都转换成百分比。我想要做的是获得本地CSS规则。例如它在CSS中被指定为20％，并会返回20％的值。如果它被指定为20px，那么它将返回20px。 – Andrew 2013-05-06 20:40:57

然后我想你需要让你的问题100％清楚。 – Xotic750 2013-05-06 20:42:55

已经改变我的措辞帮助。对于那个很抱歉。 – Andrew 2013-05-06 20:44:11

如何在Firefox和Opera中检索CSS属性如何编写？

回答

相关问题