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

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

工作实例

jQuery(或其他一些库):

另一个选择是使用像jQuery(或任何你喜欢的)的JavaScript库,它将为您提供跨浏览器解决方案来获取价值.

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

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

工作实例

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.getCompulatedStyle

前任：

var div = document.getElementById('my-div');
var style = getComputedStyle(div);
var left = style.getPropertyValue("left");