20

我的 CSS 规则如下所示：

#my-div{
    display: none;
    position: absolute;
    left: -160px;
    bottom: -150px;
}

我试图像这样获得左属性的价值：

  • document.getElementById('my-div').style.left
  • document.getElementById('my-div').offsetLeft

问题是两者都返回null。哪里有问题？

4

4 回答 4

32

问题是someElement.style.left只有当你有内联样式时才有效。由于您通过样式表应用样式，因此您将无法以您期望的方式获取值。

您可以采取其他几种方法来通过 JavaScript 获取价值：

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

工作示例 ​</p>

于 2012-12-08T14:40:19.687 回答
5

你应该这样称呼

document.getElementById('my-div').style.left
document.getElementById('my-div').offsetLeft

加载文档时，如果您之前调用它，它将返回 null 因为元素尚不存在。因此，您可以使用 jQuery 来确定何时加载所有内容。

$(function() {
    //put your code here
});
于 2012-12-08T14:37:38.277 回答
2

问题在于，由于 CSS 是与 JS 分开加载的，因此没有官方方法可以确保该style.left属性准确无误。该style.left属性是一个不同的、更高优先级的样式覆盖。

您需要使用该getComputedStyle功能。

https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

前任：

var div = document.getElementById('my-div');
var style = getComputedStyle(div);
var left = style.getPropertyValue("left");
于 2012-12-08T14:37:45.753 回答
0

也许您必须在文档准备好后调用您的函数。

如果你使用 jQuery，你可以更快地找到左值：

 $(document).ready(function() {
     var $left = $('#my-div').css('left');
     console.log($left);
 });
于 2012-12-08T14:38:42.087 回答