难度提升 第五天

offset系列
offset偏移量 相关属性可以动态的得到该元素的位置(偏移)、大小等
1、获得元素距离带有定位父元素的位置
2、获得元素自身的大小(宽度高度)
注意：返回的数值都不带单位

offset与style的区别
offset
offset 可以得到任意样式表中的样式值
offset系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth等属性是只读居性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适
style
style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border的值
style.width是可读写居性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用style改变

opacity半透明的意思

使用 mousemove 来定位鼠标位置的时候，只要鼠标移动，任意的位置都会被捕捉到。
使用mouseover 来定位鼠标位置的时候，则只有当鼠标是从外部进入dom元素时，鼠标的位置才会被捕捉到，如果鼠标在dom元素内部移动，鼠标位置的定位仍然是首次进入dom元素时的定位，不会改变。

client

翻译过来就是客户端，我们使用client系列的相关属性来获取素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性
element.clientTop 返回元素上边框的大小
element.clientLeft返回元素左边框的大小
element.clientWidth返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

pageshow事件是无论你是从a链接还是刷新按钮还是前进后退按钮回来原先的页面，无论页面是否来自缓存，再重新加载页面时，pageshow会在load事件触发后触发。

pageshow 是我们重新加载页面触发的事件

 e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元索的大小、滚动距离等
scroll系列属性
element.scrollTop 返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft 返回被卷去的左侧距离，返回教值不带单位
element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位

重点记住window.pageYOffset和window.pageXOffset
这里注意是整个页面被卷去的头部：可以通过window.pageYOffset获得

被卷去的左侧：window.pageXOffset
元素则是用scrollTop

三大系列大小对比
element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位
scrollWidth是超出了自身大小才用

三者主要用法
1. offset系列经常用于获得元素位置 offsetLeft  offsetTop

2. client经常用于获取元系大小 clientWidth  clientHeight
3. scroll经常用于获取滚动距离 scrollTop  scrollLeft

4.注意页面滚动的距离通过 window.pageXoffset 获得

mouseenter 和mouseover的区别
mouseenter 鼠标事件
当鼠标移动到元素上时就会触发mouseenter事件
类似mouseover

它们两者之间的差别是
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发