如何使用javascript获取像素的left / right / top / bottom属性值？

Question

我需要在px中获取#test的left / right / top / bottom属性。 我的js代码将属性值设置为auto 。 如何获取px的值？

<div id="test">
    <p>Dummy text</p>
</div>

#test{
    position: absolute;
}

window.onload = function(){
    var test = document.getElementById("test");
    var left = window.getComputedStyle(test).getPropertyValue("left");
    console.log(left);  // auto
};

Answer 1

使用offsetLeft代替

test.offsetLeft

 window.onload = function(){ var test = document.getElementById("test"); document.write(test.offsetLeft); // auto }; 

 #test{ position: absolute; } 

 <div id="test"> <p>Dummy text</p> </div> 

Answer 2

使用此代码

 window.onload = function(){ var test = document.getElementById("test"); var left = test.offsetLeft; var right = test.offsetWidth - left; var top = test.offsetTop; var bottom = test.offsetHeight - top; document.write("Left:" + left + "//"); document.write("Right:" + right + "//"); document.write("Top:" + top + "//"); document.write("Bottom:" + bottom); }; 

 #test{ position: absolute; } 

 <div id="test"> <p>Dummy text</p> </div>