如何使用 JavaScript 获取 div 的 CSS 左属性值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13778439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the CSS left-property value of a div using JavaScript
提问by Kin
My CSS rule looks like this:
我的 CSS 规则如下所示：
#my-div{
display: none;
position: absolute;
left: -160px;
bottom: -150px;
}
I'm trying to get value of the left-property like this:
我正在尝试像这样获得左属性的价值：
document.getElementById('my-div').style.leftdocument.getElementById('my-div').offsetLeft
document.getElementById('my-div').style.leftdocument.getElementById('my-div').offsetLeft
The problem is that both return null. Where is the problem?
问题是两者都返回null。问题出在哪儿？
回答by Christofer Eliasson
The problem is that someElement.style.leftonly work if you have inline style. Since you apply your styling through a stylesheet, you will not be able to fetch the value the way you expect.
问题是someElement.style.left只有当你有内联样式时才有效。由于您通过样式表应用您的样式，您将无法以您期望的方式获取值。
You have a couple of other approaches you could take to get the value through JavaScript:
您可以采用其他几种方法来通过 JavaScript 获取值：
window.getComputedStyle:
window.getComputedStyle:
It is possible to get the computed style of an element using window.getComputedStyle, the problem is that it has quite limited support (IE9+). If you still want to use it you could wrap it up in a function to make it a bit easier to get each property:
可以使用 获取元素的计算样式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 (or some other library):
jQuery（或其他一些库）：
Another option would be to use a JavaScript library like jQuery(or whatever you prefer), which will provide you with a cross-browser solution to get the value.
另一种选择是使用像jQuery（或任何你喜欢的）这样的 JavaScript 库，这将为你提供一个跨浏览器的解决方案来获取价值。
With jQuery you could use the .css()method to read the CSS-property of the element.
使用 jQuery，您可以使用该.css()方法读取元素的 CSS 属性。
$(function () {
var left = $("#my-div").css("left");
});
工作示例?
回答by Sh1d0w
You should call this
你应该叫这个
document.getElementById('my-div').style.left
document.getElementById('my-div').offsetLeft
when document is loaded, if you call it earlier it will return null because element doesnt exists yet. So you can use jQuery to determine when all content is loaded.
加载文档时，如果您早点调用它，它将返回 null，因为元素尚不存在。因此您可以使用 jQuery 来确定何时加载所有内容。
$(function() {
//put your code here
});
回答by Jeffrey Sweeney
The problem is that, since CSS is loaded separately from the JS, there's no official way to ensure that the style.leftproperty will be accurate. The style.leftproperty is a different, higher-priority style override.
问题在于，由于 CSS 是与 JS 分开加载的，因此没有官方的方法来确保该style.left属性是准确的。该style.left属性是一个不同的、更高优先级的样式覆盖。
You'll need to use the getComputedStylefunction.
您将需要使用该getComputedStyle功能。
https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
Ex:
前任：
var div = document.getElementById('my-div');
var style = getComputedStyle(div);
var left = style.getPropertyValue("left");
回答by Luca Davanzo
Maybe you have to call your functions after document ready.
也许您必须在文档准备好后调用您的函数。
If you use jQuery you can find left value faster:
如果您使用 jQuery，您可以更快地找到左值：
$(document).ready(function() {
var $left = $('#my-div').css('left');
console.log($left);
});
