文章目录
一.元素偏移量 offset 系列
1 . offset 概述
2. offset 与 style 区别
二. 元素可视区 client 系列
1 . client概述
三.元素滚动 scroll 系列
1 . scroll 概述
2. 页面被卷去的头部
一.元素偏移量 offset 系列
1. offset 概述
offset 翻译过来就是偏移量， 使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
-
获得元素距离带有定位父元素的位置
-
获得元素自身的大小（宽度高度）
-
注意：返回的数值都不带单位
2. offset 与 style 区别
offset
-
offset 可以得到任意样式表中的样式值
-
offset 系列获得的数值是没有单位的
-
offsetWidth 包含padding+border+width
-
offsetWidth 等属性是只读属性，只能获取不能赋值
想要获取元素大小位置，用offset更合适
style
-
style 只能得到行内样式表中的样式值
-
style.width 获得的是带有单位的字符串
-
style.width 获得不包含padding和border 的值
-
style.width 是可读写属性，可以获取也可以赋值
想要给元素更改值，则需要用style改变
二. 元素可视区 client 系列
1. client概述
client 翻译过来就是客户端，使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client
系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
三.元素滚动 scroll 系列
1. scroll 概述
scroll 翻译过来就是滚动的，使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
2. 页面被卷去的头部
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。
四.三大系列总结
主要用法：
1.offset系列 经常用于获得元素位置 offsetLeft offsetTop
2.client经常用于获取元素大小 clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageXOffset 获得
面试常问：
mouseenter 和mouseover的区别：
- 当鼠标移动到元素上时就会触发mouseenter 事件
- 类似 mouseover，它们两者之间的差别是
- mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
- 之所以这样，就是因为mouseenter不会冒泡
- 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡
作业部分：