我的CSS规则如下所示：
#my-div{
display: none;
position: absolute;
left: -160px;
bottom: -150px;
}
我试图获得左边的属性的价值,如下所示：
> document.getElementById(‘my-div’).style.left
> document.getElementById(‘my-div’).offsetLeft
问题是两者都返回null.哪里有问题？
解决方法
问题是someElement.style.left只有内置样式才有效.由于您通过样式表应用您的样式,您将无法以期望的方式获取该值.
window.getComputedStyle：
可以使用window.getComputedStyle获得一个元素的计算风格,问题是它有非常有限的支持(IE9).如果您仍然想使用它,您可以将其包装在一个函数中,以便使每个属性更容易：
function getCssProperty(elmId,property){
var elem = document.getElementById(elmId);
return window.getComputedStyle(elem,null).getPropertyValue(property);
}
// You could now get your value like
var left = getCssProperty("my-div","left");
jQuery(或其他一些库)：
另一个选择是使用像jQuery(或任何你喜欢的)的JavaScript库,这将为您提供一个跨浏览器解决方案来获取价值.
使用jQuery可以使用.css()方法来读取元素的CSS属性.
$(function () {
var left = $("#my-div").css("left");
});
