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

Get position of an element relatively to one ancestor in Javascript

本文关键字：一个 祖先 位置 元素 获取 相对于 Javascript      更新时间：2023-09-26

假设我有以下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中工作？

使用getBoundingClientRect（）接收子元素和父元素的位置，然后从子元素减去父元素的坐标。

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

如果父母坐标为（左）500、（上）500和孩子坐标为550550，那么孩子相对于父母的坐标为50/50

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

本页介绍了如何做到这一点。从a元素开始，您需要向上爬DOM层次结构，并添加每个父元素的offsetTop和offsetHeight属性，直到到达祖先。

相关文章：