offset、client、scroll这几个概念很难记忆,所以打算存个档。。。
一、offset
在英文中 offset的意思是抵消
1、offsetX、offsetY
获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX (offsetY)规定了事件对象与目标节点的内填充边(padding edge)在 X (Y)轴方向上的偏移量。
比如我给div元素注册了点击事件,在div内容区域点击,获取的就是相对于div内容区域的坐标,但一定要注意,如果点击区域是border区域那么就是相对于内容区域的负方向了。
2、offsetParent
offsetParent是一个只读属性,返回一个指向最近的(closest,指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素,则 offsetParent 为最近的 table, td, th或body元素。当元素的 style.display 设置为 “none” 时,offsetParent 返回 null。
简单概括一下:offsetParent指的是某个元素最近的并带有positon属性(默认值static除外)父级元素,如果这个父级元素没有position属性,那么这个父级元素只能为最近的 table, td, th或body元素。
在 Webkit 中,如果元素为隐藏的(该元素或其祖先元素的 style.display 为 “none”),或者该元素的 style.position 被设为 “fixed”,则该属性返回 null。
-
offsetWidth,offsetHeight
它们都是只读属性,返回一个元素的布局宽度或高度。如果是标准盒子模型那么:
宽度:width + padding + border + scrollbar(如果横向滚动条存在)
高度:height + padding + border + scrollbar(如果纵向滚动条存在)
如果是怪异盒子模型(IE模型,可以通过box-sizing:border-box;设置):
宽度:width
高度:height
注意:这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用element.getBoundingClientRect方法。 4. offsetLeft 和 offsetTop
它们是一个只读属性,返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。
说到这里,我们上面提到的offsetParent就派上用场了。
比如我们上面一直讲的例子,把之前加的所有内嵌属性删除掉后,当前div元素的offsetParent 属性值返回body元素。那么div元素的offsetLeft 和 offsetTop的值就是左上角相对于body 的距离。计算公式如下:
offsetLeft = marginLeft + left
offsetTop = marginTop + top
在浏览器控制台打印一下:
即使当前元素的父级有position,值也是一样的,因为它都是相对于父级。
二、client系列
1、clientX和clientY
获取鼠标指针位置相对于可视区域的 x 坐标和y坐标,也就是说是相对于浏览器的距离,跟触发事件的对象没关系
2、clientWidth和clientHeight
可视区域的宽高:width+padding / height + padding
3、clientLeft和clientTop
可视区域的左边框和上边框的宽度
三、scroll系列
原文链接 https://blog.csdn.net/weixin_42429672/article/details/91348194