持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情
今天学习的是offset、client、scroll三系列
1. 元素偏移量 offset系列
使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等
一般我们用offset系列获取元素的位置，而用style去改变位置
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意： 返回的数值都不带单位
1.1 常用属性
| 属性 | 作用 |
|---|---|
| element.offsetParent | 返回作为该元素带有定位的父级元素,如果父级都没有定位则返回body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
| element.offsetWidth | 返回包括padding\边框\内容区的宽度 |
| element.offsetHeight | 返回自身包括padding\边框\内容区的高度 |
1.2 offset和style区别
-
- offset可以获得任意样式表的样式值
- offset系列获得的数值无单位
- 包括paddingborderwidth
- 只读不可赋值
-
- 只能获得行内样式表的样式值
- style.width 获得的是带有单位的字符串
- style.width 获得不包含padding和border 的值
- style.width 是可读写属性，可以获取也可以赋值
2. 元素可视区client系列
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等
| 属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding\内容区的高度,不含边框 |
| element.clientHeight | 返回自身包括padding\内容区的高度.不含边框 |
鼠标在页面坐标
e.pageX e.pageY
立即执行函数
-
(function() {})() -
(function(){}())
dpr
物理像素比
3. 元素滚动scroll系列
得到元素大小，滚动距离
| 属性 | 作用 |
|---|---|
element.scrollTop | 返回被卷去的上侧距离，不带单位 |
element.scrollLeft | 返回被卷去的左侧距离，不带单位 |
element.scrollWidth | 返回自身实际高度，不含边框，不带单位 |
element.srcollHeight | 返回自身实际高度，不含边框，不带单位 |
与client区别，当内容过多溢出，client只能返回高度本身内容大小，而scroll返回内容实际高度，包括溢出部分
被卷去的头部：
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。
注意：
- 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document
- 滚动到某个位置，就是判断页面被卷去的上部值。
- 页面被卷去的头部：可以通过
window.pageYOffset获得 如果是被卷去的左侧window.pageXOffset - 注意，元素被卷去的头部是
element.scrollTop, 如果是页面被卷去的头部 则是window.pageYOffset
兼容性处理
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//使用的时候 getScroll().left
三系列总结
主要用法
- offset系列 经常用于获得元素位置
offsetLeft offsetTop - client 经常用于获取元素大小
clientWidth clientHeight - scroll 经常用于获取滚动距离
scrollTop scrollLeft - 注意页面滚动的距离通过
window.pageXOffset获得
4. mouseenter 和 mouseover 的区别
- mouseenter 不会冒泡，因此 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
- 跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡
