javascript 无法从结果 getComputedStyle 中获取边距属性的值

Unable to get value of margin property from result getComputedStyle

提问by dasdasdasdasd

The result of a getComputedStylecontains a property named "margin", but the property is always an empty string ("") in Mozilla Firefox or Apple Safari; however, in Internet Explorer (and Google Chrome) the margin property contains the expected value (even in IE 6). The same result is returned when using the getPropertyValue("margin")method of the returned object.

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

How can I get the computed value of the margin in Firefox and Safari?

如何在 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

回答by nasser-sh

The getComputedStyle()function should not evaluate the values of shorthand properties(such as margin, padding), only longhand properties (such as margin-top, margin-bottom, padding-top). In the case of shorthand properties it should only return an empty string.

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

In addition, you can take a look at this linkfor a cross-browser solution, which uses currentStylefor internet explorer

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

回答by HIRA THAKUR

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

you can use this shim,works for all browsers:refer this

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

use currentStylefor Internet Explorer.

use getComputedStylefor other browsers

为 Internet Explorer使用currentStyle。

对其他浏览器使用getComputedStyle

回答by Gaurav

I tried something like this and it is worKing for me in all browsers

我试过这样的事情，它在所有浏览器中都对我有用

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

回答by user10089632

Getting an attribute of this interface is equivalent to calling the getPropertyValue method of the CSSStyleDeclaration interface

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

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

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

The problem as David Flanagan precised in 'Javascript the definitive guide' is about computed styles only :

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

• Shortcut properties are not computed, only the fundamental properties that they are based on. Don't query the margin property, for example, but use marginLeft, marginTop, and so on.

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

And here's a stackoverflow answerto back this up.

这是一个stackoverflow 答案来支持这一点。