Как получить pageX и pageY элемента без использования события

Question

Есть ли какое-либо позиционирование любого элемента без использования e.pageX и e.pageY.

Проверить это fiddle

скрипку на самом деле плохая попытка на то, что им пытаются спросить, но я, хотя визуальный пример будет лучше. Что я хочу знать, можно ли найти X и Y координаты любого элемента на DOM с помощью ссылки, используя

document.getElementByID('elementID'); 

или, может быть

document.getElementsByTagName('TagName'); 

EDIT: Хотя я использовали JQuery в FIDDLE, я хотел бы получить возможное решение, используя только JavaScript.

Answer 1

Вы можете использовать

document.getElementById("elementID").offsetTop; 
document.getElementById("elementID").offsetLeft; 

См MDN. Они возвращают смещение от родительского элемента. Если вам требуется смещение элемента по отношению ко всему телу, оно может стать более сложным, так как вам придется суммировать смещения каждого элемента в цепочке.
Соответственно для .getElementsByTagName, так как каждый объект в DOM имеет эти атрибуты.

.getBoundingClientRect также worth a look.

var clientRectangle = document.getElementById("elementID").getBoundingClientRect(); 
console.log(clientRectangle.top); //or left, right, bottom 

Answer 2

Я думаю, что offset() должен работать.

$(element).offset() //will get {top:.., left:....} 

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
$("#something").click(function(e){ 
 
    var parentOffset = $(this).parent().offset(); 
 
    //or $(this).offset(); if you really just want the current element's offset 
 
    var relX = e.pageX - parentOffset.left; 
 
    var relY = e.pageY - parentOffset.top; 
 
}); 
 
</script>

Answer 4

Вы можете найти почти все Jquery вещи здесь: http://youmightnotneedjquery.com/

$(el).offset(); 

так же, как:

var rect = el.getBoundingClientRect(); 

{ 
    top: rect.top + document.body.scrollTop, 
    left: rect.left + document.body.scrollLeft 
}