Question

我的CSS规则如下所示：

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

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

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

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

Answer 1

问题是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");

<强> Working example

jQuery（或其他一些库）：

另一种选择是使用像jQuery这样的JavaScript库（或者你喜欢的任何东西），它将为你提供一个跨浏览器的解决方案来获取价值。

使用jQuery，您可以使用.css()方法来读取元素的CSS属性。

$(function () {
  var left = $("#my-div").css("left");
});

<强> Working example

Answer 2

你应该叫这个

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

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

$(function() {
    //put your code here
});

Answer 3

问题在于，由于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");

Answer 4

也许你必须在准备好文件后调用你的功能。

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

 $(document).ready(function() {
     var $left = $('#my-div').css('left');
     console.log($left);
 });

如何使用JavaScript获取div的CSS left-property值

4 个答案: