21.元素的偏移量-offset和可视区域client系列

目录

1.offsetLeft & offsetTop  

2. offsetWidth、offsetHeight  

3. offsetParent

4. offset和style的区别

5. client系列

---

offset系列属性可以动态得到元素的位置、大小等，获取的是数字型的，不带单位

1.offsetLeft & offsetTop  

获取元素 距离 带有定位父元素的位置

        var father = document.querySelector('.father');

        var son = document.querySelector('.son')

        console.log(father.offsetTop);

        console.log(father.offsetLeft);

        console.log(son.offsetLeft);

2. offsetWidth、offsetHeight  

获取元素自身的宽度和高度，是包含border、padding、width

        console.log(son.offsetWidth);

        console.log(son.offsetHeight);

3. offsetParent

返回带有定位的父亲， 否则返回的是body

        console.log(son.offsetParent);

        console.log(son.parentNode); // 返回的是父元素，不管父元素是否有定位都会返回

4. offset和style的区别

 

5. client系列

 client翻译过来就是客户端的意思，使用client系列的相关属性来获取元素的可视区域的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等