Question

getComputedStyle的结果包含名为“margin”的属性，但该属性在Mozilla Firefox或Apple Safari中始终为空字符串（""）;但是，在Internet Explorer（和Google Chrome）中，margin属性包含预期值（即使在IE 6中）。使用返回对象的getPropertyValue("margin")方法时返回相同的结果。

如何在Firefox和Safari中获取保证金的计算值？

var el = document.body.appendChild(document.createElement('div'));
el.style.margin = '2px';
console.log(getComputedStyle(el, null).margin === ""); // false in IE and Chrome
console.log(getComputedStyle(el, null).getPropertyValue("margin") === ""); // same

Answer 1

getComputedStyle()函数should not evaluate the values of shorthand properties（例如margin，padding），只有简写属性（例如margin-top，margin-bottom，{ {1}}）。在速记属性的情况下，它应该只返回一个空字符串。

padding-top

此外，您可以查看this link的跨浏览器解决方案，该解决方案使用var el = document.body.appendChild(document.createElement('div')); el.style.margin = '2px'; var computed = getComputedStyle(el); var longhands = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right']; longhands.forEach(function(e) { console.log(e + ': ' + computed.getPropertyValue(e)) });用于Internet Explorer

Answer 2

var elem = document.getElementById("your-div");
if (elem.currentStyle) {
    var margin = elem.currentStyle.margin;
} else if (window.getComputedStyle) {
    var margin = window.getComputedStyle(elem, null).getPropertyValue("margin");
}

alert(margin);

您可以使用此填充程序，适用于所有浏览器：请参阅this

对Internet Explorer使用 currentStyle 。

将 getComputedStyle 用于其他浏览器

Answer 3

我尝试了类似这样的东西，它在所有浏览器中都为我担心

var elem = document.createElement('div');

var t=document.createTextNode('M')
elem.appendChild(t);
document.body.appendChild(elem);

var myfontSize = getStyle(elem,"fontSize")
alert(myfontSize)

function getStyle(elem,prop){
if (elem.currentStyle) {
var res= elem.currentStyle.margin;
} else if (window.getComputedStyle) {
if (window.getComputedStyle.getPropertyValue){
var res= window.getComputedStyle(elem, null).getPropertyValue(prop)}
else{var res =window.getComputedStyle(elem)[prop] };
}
return res;
}

Answer 4

获取此接口的属性等同于调用 CSSStyleDeclaration接口的getPropertyValue方法

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

David Flanagan在'Javascript the definitive guide'中精确定位的问题仅与计算样式有关：

不会计算快捷方式属性，只会计算它们所基于的基本属性。不要查询保证金属性，   例如，但使用marginLeft，marginTop等。

这是一个stackoverflow answer来支持这个。

无法从结果getComputedStyle获取margin属性的值

4 个答案: