bootstrap treeview获取父节点_JavaScript(10) 获取元素位置&大小

offset 系列

获取位置

获取元素距离父元素左上角的距离.

注意, 以带有定位的父亲元素为准. 直接父元素没有定位, 则会继续往上找, 直到找到 body

• offsetLeft: 距离左沿的距离.

• offsetTop: 距离上沿的距离.

 <div class="parent">    <div class="child">    div>div>

 .parent {
        width: 500px;    height: 500px;    background-color: green;    margin: 100px auto;}.child {
        width: 300px;    height: 300px;    background-color: red;    margin-left: auto;    margin-right: auto;}

 var parent = document.querySelector('.parent');console.log(parent.offsetLeft, parent.offsetTop);var child = document.querySelector('.child');console.log(child.offsetLeft, child.offsetTop);

此时发现, child 的 offsetLeft 和 offsetTop 都是基于 body 来计算的. 原因就是父元素没有定位!

如果给 parent 加上 position: relative;, 结果就是基于 parent 为基准进行计算了.

接下来, 在 son 中再嵌套一层 grandson

 <div class="parent">    <div class="child">        <div class="grandchild">div>    div>div>

 .grandchild {
        width: 100px;    height: 100px;    background-color: purple;    margin-left: auto;    margin-right: auto;}

 var grandchild = document.querySelector('.grandchild');console.log(grandchild.offsetLeft, grandchild.offsetTop);