Получить позицию элемента относительно одного предка в Javascript

Скажем, у меня есть следующий HTML-код (это пример):Получить позицию элемента относительно одного предка в Javascript

<div id="site_header_container" class="site_bar_container"> 
    <div id="site_header"> 
     <div id="header_logo_container"> 
        <a class="sliced" id="header_logo" href="/">&nbsp;</a> 
       </div> 
     </div> 
</div>

с несколькими CSS применяется. В основном в div с id="site_header_container", есть background-image. Я хотел бы знать, какие верхние и левые значения имеет элемент <a> внутри site_header_container.

Итак, как я дал один элемент, назову его, предка, а другой элемент называет его потомком, знать положения потомка относительно его предка в чистого Javascript (я не хотите использовать любые библиотеки), и он должен работать только в Chrome?

источник

2013-11-20 Johnny Red

Найти местоположение каждого и использование * MATH *. http://stackoverflow.com/questions/6255019/coordinates-of-html-elements –

@Diodeus OP сказал нет jQuery – Christophe

Как jQuery не «чистый» JavaScript? Вы имеете в виду JavaScript, который вы пишете сами? – glomad

Используйте getBoundingClientRect(), чтобы выбрать положение дочернего элемента и родительского элемента, а затем вычесть координаты родителя из дочернего.

var coords = element.getBoundingClientRect(); 
console.log(coords.top, coords.right, coords.bottom, coords.left);

Если родители coordienates находятся (слева) 500, (сверху) 500 и ребенка 550, 550, ребенка координаты относительно его родителя являются 50, 50

http://codepen.io/dollseb/pen/oilyH

источник

2013-11-20 21:40:24 dollseb

is getBoundingClientRect всегда доверчивое? Я имею в виду, если элемент будет абсолютным и так далее, будет ли он работать тоже? –

Я создал небольшой тестовый пример и играл вокруг него. не стесняйтесь делать то же самое. :) http://codepen.io/dollseb/pen/oilyH – dollseb

This page объясняет, как это сделать. Начиная с вашего элемента, вам нужно подняться вверх по иерархии DOM и добавить свойства offsetTop и offsetHeight каждого родителя, пока не достигнете предка.

источник

2013-11-20 21:28:27 Christophe

Получить позицию элемента относительно одного предка в Javascript

ответ

Смежные вопросы