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

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==”）；//IE和Chrome中的错误 console.log（getComputedStyle（el，null）.getPropertyValue（“边距”）=”；//相同 您可以使用此垫片，适用于所有浏览器：请参阅

对Internet Explorer使用currentStyle

对其他浏览器使用getComputedStyle

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=[“上边距”、“下边距”、“左边距”、“右边距”]；

---

forEach（函数（e）{console.log（e+':'+computed.getPropertyValue（e））}）我尝试了类似的方法，它在所有浏览器中都适用

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

获取此接口的属性相当于调用 CSSStyleDeclaration接口的getPropertyValue方法

正如David Flanagan在《Javascript最终指南》中所指出的，问题只与计算样式有关：

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

---

这里有一个例子来支持这一点。

不，我尝试了这段代码，但问题是相同的，在Mozilla FixFox中，这个代码是经过测试和测试的……你的代码一定有问题。你能想出更多的细节吗？或者把上面的代码完全相同，然后尝试一次……记住……当你认为Evrice是完美的时候，调试代码是最困难的。至少试一次。这是我的测试，在这个项目中。是导入的“js/script.js”，你可以看到我的代码我有一个问题，当边距设置为“自动”时，internet explorer返回了计算出的px值。所有其他浏览器返回“0px”。使用你的代码，我可以修复它。谢谢您可能想用

currentStyle[prop]

更改

currentStyle.margin

。否则代码也有点混乱。您的浏览器是否有

window.getComputedStyle.getPropertyValue

？为什么其中一个调用的参数

null

，而另一个则不是？getPropertyValue（prop）调用看起来像这里的示例：，但是，该方法属于CSSStyleDeclaration，它是getComputedStyle的返回值。因此，罗兰，为了回答你的问题，没有浏览器会有window.getComputedStyle.getPropertyValue.Computed style和transform属性似乎会返回一个转换矩阵。CSSWG最近决定getComputedStyle应该包含速记属性的值：我使用了“margin”属性，它在Chrome中工作，但在FF中不工作，我将它改为“页边空白顶部”，现在它可以在任何地方使用，谢谢

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