06- offset相关属性

<div class="father">
    <div class="son"></div>
</div>

• offsetLeft和offsetTop作用

  • 获取元素到第一个定位祖先元素之间的偏移位
  • 如果没有祖先元素是定位的, 那么就是获取到body的偏移位

    let oSDiv = document.querySelector(".son");
    oSDiv.onclick = function () {
        console.log(oSDiv.offsetLeft); 
        console.log(oSDiv.offsetTop);
    }
  

<div class="grand-father">
    <div class="father"> 
        <div class="son"></div>
    </div>
</div>

• offsetParent作用

  • 获取元素的第一个定位祖先元素
  • 如果没有祖先元素是定位的, 那么就是获取到的就是body

    let oSDiv = document.querySelector(".son");
    oSDiv.onclick = function () {
        console.log(oSDiv.offsetParent);
    }