元素offset、client、scroll等系列属性

元素偏移量 offset 系列

offset 概述

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

在这里插入图片描述

获得元素距离带有定位父元素的位置。
获得元素自身的大小。
返回的是不带单位的数字型数据。

offset 系列常用属性

offset 系列属性	描述
element.offsetParent	返回该元素带有定位的最近的祖先元素。如果所有祖先元素都没有定位则返回 body 元素。
element.offsetTop	返回元素相对带有定位父元素上边框的偏移。
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移。
element.offsetWidth	返回自身包括 padding、border、content 的总宽度。
element.offsetHeight	返回自身包括 padding、border、content 的总高度。

offset 与 style 属性的区别

offset 可以得到任意样式表中的样式值，style 只能得到行内样式表的样式值。
offset 得到的是不带单位的数字型值，style.width 得到的是带单位的字符串型值。
offsetWidth 包含 padding + border + width；style.width 只包含 content 部分。
offsetWidth 等属性是只读属性，只能获取并使用不能赋值；style.width是可读写属性，可以获取也可以赋值。

获取元素的大小位置，使用 offset 更合适，要给元素更改值，则需要使用 style 属性更改。

元素可视区 client 系列

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

在这里插入图片描述

client 系列属性	描述
element.clientTop	返回元素上边框的大小。
element.clientLeft	返回元素左边框的大小。
element.clientWidth	返回自身包括 padding、content 的总宽度。
element.clientHeight	返回自身包括 padding、content 的总高度。

元素 scroll 系列属性

scroll 即滚动的意思，我们使用 scroll 系列的相关属性可以动态地得到该元素地大小，滚动距离等。

在这里插入图片描述

scroll 系列属性	描述
element.scrollTop	返回元素被卷去的上侧距离。
element.scrollLeft	返回元素被卷去的左侧距离。
element.scrollWidth	返回自身内容地实际宽度。
element.scrollHeight	返回自身内容的实际高度。

被卷去头部的概念：当一个元素设定固定的宽高，但是容纳不下它里面的内容时，我们就要给它设置 overflow 属性。可以隐藏也可以设置滚轮滚动查看内容。当滚动滚轮时元素内部的内容就会有一部分被卷出元素的外部并隐藏，上面被卷出的部分就叫卷去头部。

代码演示：

<!-- 样式略过 -->
<body>
    <div class="boxFather">
        <div class="boxSon">
            <p>1</p>
            <p style="padding-top: 105px;">2</p>
        </div>
    </div>
</body>
<script>
    var boxFather = document.querySelector('.boxFather');
    boxFather.onscroll = function() {
     
     
    	// 不断输出被卷去的头部
        console.log(boxFather.scrollTop); 
    }
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nRwpKnBh-1611927022833)(https://s3.ax1x.com/2021/01/29/yiHBj0.gif#pic_center)]

常用场景是浏览器的高度不足以显示整个页面时会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏的高度即页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。
页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

声明了 DTD ，使用 document.documentElement.scrollTop ，即使用 html 文档。
未声明 DTD ，使用 document.body.scrollTop ，即使用 body 元素。
IE9 开始支持的新方法 window.pageYOffset 和 window.pageXOffset 。

function getScroll() {
    
    
	return {
    
    
 		left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
 		top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
 };
}
// 使用时可以将这两个值当作是函数 getScroll() 的属性值（函数也是对象）。
var y = getScroll().top;

总结

三个系列的属性返回的都是不带单位的数字型数据。
offset 系列经常用于获取元素的位置 offsetLeft offsetTop 。
client 系列经常用于获取元素大小 clientWidth clientHeight 。
scroll 系列经常用于获取滚动距离 scrollTop scrollLeft 。
页面的滚动距离通过 window.pageYOffset 获得。

与他们有关的三个小案例：模态框、放大镜效果实现、回到顶部按钮的显示隐藏。