javascript - 在 CSS 中设置时无法使用 JavaScript DOM 检测边距

Question

在 CSS 中设置时无法使用 JavaScript DOM 检测边距:

<div>
  <div id="elem">

  </div>
</div>


#elem{
   margin:0;   
}

console.log(document.getElementById('elem').style.marginLeft)     //""
console.log(document.getElementById('elem').style["margin-left"]) //undefined
console.log($('#elem').css('margin-left'))                        //0px

怎么了？ 在不通过 DOM 设置边距的情况下确定检测边距的防弹方法是什么？ 为什么 jQuery 会检测？ 任何人都可以在技术细节中解释为什么无法检测到 margin 以便我了解吗？

http://jsfiddle.net/SBznP/1/

Answer 1

请记住，CSS 和 DOM 是不同的部分。 CSS 的更改不会更改 DOM 内容，反之亦然。

这意味着，element.style.marginLeft (DOM) 返回 style 属性的 marginLeft 属性的当前值。

使用 document.defaultView.getComputedStyle(element, '').getPropertyValue('margin-left') 您可以获得计算值。

PS:最后一种方式 - 很遗憾 - 与一些旧版浏览器不兼容。您可能对跨浏览器版本感兴趣:http://cross-browser.com/x/lib/view.php?s=xGetComputedStyle