【获取网页元素高宽及距离的三大系列】

offset系列

offset概述

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位
offset系列常用属性：
offset系列属性
作用
1 element.offsetParent
返回作为该元素带有定位的父级元素如果父级都没有定位则返回body
2 element.offsetTop
返回元素相对带有定位父元素上方的偏移
3 element.offsetLeft
返回元素相对带有定位父元素左边框的偏移
4 element.offsetWidth
返回自身包括padding、边框、内容区的宽度，返回数值不带单位
5 element.offsetHeight
返回自身包括padding、边框、内容区的高度，返回数值不带单位

代码

    // offset系列
// 1  可以得到元素的偏移  位置   返回的不带单位的数值
    console.log(dad.offsetTop);  //相对于页面左上角
    console.log(dad.offsetLeft);
    //1.1   它以带有定位的父亲为准 如果没有父亲或者父亲没有定位则以body为准
    console.log(son.offsetTop);
    console.log(son.offsetLeft);
    // 1.2若要得到它相对父级的偏移，就给父亲加上（position：relative）

//2         可以得到元素的大小宽度和高度是包含padding+border+width
    console.log(son.offsetWidth);
    console.log(son.offsetHeight);
//    3 返回带有定位的父亲 否则返回的就是body
    console.log(son.offsetParent);  //返回带有定位的父亲 否则返回的就是body
    console.log(son.parentNode); //返回父亲 是最近一级的父亲 亲爸爸 不管爸爸有没有定位
    console.log(son.parentElement);

client系列

/client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列
的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性
作用
element.clientTop
返回元素上边框的大小
element.clientLeft
返回元素左边框的大小
element.clientWidth
返回自身包括padding、内容区的宽度，不含边框，j
返回数值不带单位
element.clientHeight
返回自身包括padding、内容区的高度，不含边框，返回数值不带单位/
let dad=document.querySelector(‘.dad’);
let son=document.querySelector(‘.son’);

console.log(son.clientLeft);  //返回元素左边框
console.log(son.clientTop);   //返回元素上边框
console.log(son.clientHeight);//返回自身包括padding、内容区的宽度，不含边框
console.log(son.clientWidth);

scroll系列

<!--scroll翻译过来就是滚动的，我们使用scro川系列的相关属性可以动态的得到该元素的大小、滚动距离等。
scroll系列属性
作用
element.scrollTop
返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft
返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth
返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight
返回自身实际的高度，不含边框，返回数值不带单位-->
<div style="width: 50px;height:100px;overflow: scroll" >
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
    我是内容
</div>
<script>
    var div=document.querySelector('div');
    console.log(div.scrollHeight);  //991
    console.log(div.scrollWidth)  //50
    div.addEventListener('scroll',()=>{
        console.log(div.scrollTop);   //元素竖直方向被卷去的高度
        console.log(div.scrollLeft);
    })
    document.addEventListener('scroll',()=>{
        console.log(window.pageXOffset)
        console.log(window.pageYOffset) //整个网页竖直方向被卷去的高度
    })

</script>

三大系列总结

1 三大系列大小对比

作用
element.offsetWidth
返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth
返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth
返回自身实际的宽度，不含边框，返回数值不带单位

2 主要用法：

1.offset系列经常用于获得元素位置offsetLeft offsetTop
2.client:经常用于获取元素大小clientWidth clientHeight
3.scroll经常用于获取滚动距离scrollTop scrollLeft
4.注意页面滚动的距离通过window.pagexoffset 和window。pageyoffset获得
代码如下

 document.addEventListener('scroll',()=>{
        console.log(window.pageXOffset)
        console.log(window.pageYOffset) //整个网页竖直方向被卷去的高度
    })