前端学习之JavaScript 三大系列的区别和用法

本文链接：https://blog.csdn.net/qq_45839045/article/details/122912622

今天我们给大家介绍js中获取元素一些自身属性的方法

offset 概述

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

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位
offsetWidth 和 offsetHight

offsetWidth 和 offsetHight：获取元素的宽高 + padding + border，不包括margin。如下：

offsetWidth = width + padding + border

offsetHeight = Height + padding + border

这两个属性，他们绑定在了所有的节点元素上。获取元素之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。

offsetParent

offsetParent：获取当前元素的定位父元素。

如果当前元素的父元素，有CSS定位（position为absolute、relative、fixed），那么 offsetParent 获取的是最近的那个父元素。

如果当前元素的父元素，没有CSS定位（position为absolute、relative、fixed），那么offsetParent 获取的是body。（可用parentnode 获取）

offsetLeft 和 offsetTop

offsetLeft：当前元素相对于其定位父元素的水平偏移量。

offsetTop：当前元素相对于其定位父元素的垂直偏移量。

备注：从父亲的 padding 开始算起，父亲的 border 不算在内。

offset 与 style 区别

offset

offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适

style

style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border 的值
style.width 是可读写属性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用style改变

元素可视区 client 系列

client概述

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

clientWidth 和 clientHeight

元素调用时：

clientWidth：获取元素的可见宽度（width + padding）。

clientHeight：获取元素的可见高度（height + padding）。

body/html 调用时：

clientWidth：获取网页可视区域宽度。

clientHeight：获取网页可视区域高度。

声明：

clientWidth 和 clientHeight 属性是只读的，不可修改。

clientWidth 和 clientHeight 的值都是不带 px 的，返回的都是一个数字，可以直接进行计算。

clientX 和 clientY

event调用：

clientX：鼠标距离可视区域左侧距离。

clientY：鼠标距离可视区域上侧距离。

clientTop 和 clientLeft

clientTop：盒子的上border。

clientLeft：盒子的左border

元素滚动 scroll 系列

scroll 概述

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
ScrollWidth 和 scrollHeight

ScrollWidth 和 scrollHeight：获取元素整个滚动区域的宽、高。包括 width 和 padding，不包括 border和margin。

注意：

scrollHeight 的特点是：如果内容超出了盒子，scrollHeight为内容的高（包括超出的内容）；如果不超出，scrollHeight为盒子本身的高度。ScrollWidth同理。

scrollTop 和 scrollLeft

scrollLeft：获取水平滚动条滚动的距离。

scrollTop：获取垂直滚动条滚动的距离。

说明：

当某个元素满足scrollHeight - scrollTop == clientHeight时，说明垂直滚动条滚动到底了。

当某个元素满足scrollWidth - scrollLeft == clientWidth时，说明水平滚动条滚动到底了。

三大元素的总结

三大家族 offset/scroll/client 的区别
区别1：宽高

offsetWidth = width + padding + border

offsetHeight = height + padding + border

scrollWidth = 内容宽度（不包含border）

scrollHeight = 内容高度（不包含border）

clientWidth = width + padding

clientHeight = height + padding

区别2：上左

offsetTop/offsetLeft：

调用者：任意元素。(盒子为主)
作用：距离父系盒子中带有定位的距离。

scrollTop/scrollLeft：

调用者：document.body.scrollTop（window调用）(盒子也可以调用，但必须有滚动条)
作用：浏览器无法显示的部分（被卷去的部分）。

clientY/clientX：

调用者：event
作用：鼠标距离浏览器可视区域的距离（左、上）。