Question

我有一个关于通过javascript获取DOM样式的问题。

#quicklink {
    position: absolute;
    top: 500px;
    left: 500px;
}

<div id="quicklink" class="draggable">
    <img class="menu_icon" src="4a.png" src="" />                   
</div>

当我尝试通过此代码获取元素的顶部时。为什么它总是有空字符串值？

var quicklink = document.getElementById('quicklink');
console.log(quicklink.style.top); // string value ???

谢谢！

Answer 1

这是因为样式不作为该元素ID的属性驻留在DOM中。您可以尝试getComputeStyle()访问通过单独的CSS应用的样式。

var elem1 = document.getElementById("elemId"); 
var style = window.getComputedStyle(elem1, null);

MDN：https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle

W3C：http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-OverrideAndComputed-h3

Answer 2

试试这个

function getCssProperty(elmId, property){
   var elem = document.getElementById(elmId);
   return window.getComputedStyle(elem,null).getPropertyValue(property);
}
// You could now get your value like
var top = getCssProperty("quicklink", "top");
console.log(top)

DEMO

Answer 3

试试这个：

var element = document.getElementById('quicklink'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

获取样式的属性

3 个答案: