Как получить значения свойств left/right/top/bottom в пикселях с помощью javascript?

Question

Мне нужно получить левое/правое/верхнее/нижнее свойство #test в px. Мой код 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

Используйте этот код

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>

Answer 2

использование 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>