javaScript 三大系列+event事件对象

最新推荐文章于 2022-04-27 00:19:05 发布

୧(不負眾望)૭

最新推荐文章于 2022-04-27 00:19:05 发布

阅读量223

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Huang_DW/article/details/108099127

版权

本文详细介绍了JavaScript中的offset、scroll、client三大系列，以及event事件对象。offset系列用于获取元素尺寸，如offsetWidth和offsetHeight，offsetLeft和offsetTop。scroll系列涉及ScrollWidth、scrollHeight和scrollTop/scrollLeft，用于处理内容超出可视区域的情况。client系列的clientWidth和clientHeight则用于获取可视区域尺寸，clientX和clientY提供鼠标位置信息。event事件对象在触发事件时产生，包含与事件相关的信息，如鼠标位置等。

摘要由CSDN通过智能技术生成

三大系列：offset、scroll、client
事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制）

三大系列都是以DOM元素节点的属性形式存在的。

类比访问关系，也是以属性形式存在。不同点在于，访问关系是为了获取其他节点，而三大系列是为了获取元素节点更多的信息。

在这里插入图片描述

1.offset 系列

offset：偏移、补偿、位移 offset 系列是 js 中的一套获取元素尺寸的便捷办法

offsetWidth 和 offsetHeight（检测盒子自身宽高+padding+border）
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。行内式、内嵌式、外链式都可以获取到。 offsetWidth = width + padding + border； offsetHeight = Height + padding + border；不包括margin。

offsetLeft 和 offsetTop（检测距离父盒子有定位的左/上面的距离）
返回距上级盒子中带有定位的盒子左边和上边的距离。和盒子本身有无定位无关。
如果父级都没有定位则以 body 为准。
offsetLeft 从父级的 padding 开始算，父级的 border 不算。
在父盒子有定位的情况下，offsetLeft =