26

a 的结果包含一个名为“margin”的属性，但该属性在 Mozilla Firefox 或 Apple Safari 中getComputedStyle始终为空字符串 ( )；""但是，在 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

4

4 回答 4

43

该getComputedStyle()函数不应评估速记属性（例如margin, padding）的值，而只能评估速记属性（例如margin-top, margin-bottom, padding-top）的值。在速记属性的情况下，它应该只返回一个空字符串。

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)) });

此外，您可以查看此链接以获取跨浏览器解决方案，该解决方案currentStyle用于 Internet Explorer

于 2013-09-07T17:30:33.783 回答
16 
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);

你可以使用这个垫片，适用于所有浏览器：参考这个

对 Internet Explorer使用currentStyle 。

对其他浏览器使用getComputedStyle

于 2013-09-07T17:20:26.920 回答
1

我试过这样的东西，它在所有浏览器中都适用于我

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;
}
于 2014-08-01T11:04:18.900 回答
1

获取该接口的一个属性，相当于调用了CSSStyleDeclaration接口的getPropertyValue方法

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

David Flanagan 在“Javascript 权威指南”中指出的问题仅与计算样式有关：

  • 不计算快捷方式属性，仅计算它们所基于的基本属性。例如，不要查询 margin 属性，而是使用 marginLeft、marginTop 等。

这是支持这一点的stackoverflow答案。

于 2017-09-08T22:09:46.393 回答