Question

说我有以下HTML代码（这是一个例子）：

<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。基本上在id="site_header_container"的div中，有一个background-image。我想知道<a>中site_header_container元素有哪些顶部和左侧值。

那么，我怎样才能给出一个元素，称之为祖先，另一个元素称之为后代，相对于它的祖先知道后代的位置纯 Javascript（我不想使用任何库），它只能在Chrome中运行？

Answer 1

This page解释了如何做到这一点。从您的元素开始，您需要爬上DOM层次结构并添加每个父级的offsetTop和offsetHeight属性，直到您到达祖先。

Answer 2

使用getBoundingClientRect()来重新获取子元素和父元素的位置，然后从子元素中减去父元素的坐标。

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

如果父母坐标是（左）500，（上）500和孩子的550,550，孩子相对于其父母的坐标是50,50

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

在Javascript中获取元素相对于一个祖先的位置

2 个答案: