308节---------6月26日

PC端网页特效

元素偏移量offset系列

offset概述

使用offet系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小
• 注意：返回的数值不带单位

offset系列常用属性

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

offset和style的区别

offset	style
可以获得任意样式表中的样式值	只能获得行内样式表中的样式值
获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding+border+width	style.width不好喊padding和border的值
offsetWidth是只读属性，不能赋值	style.width时可读写属性，可以获取可以赋值
获取元素大小位置用offset	想给元素改值用style

---

元素可视区client系列

翻译过来就是客户端，使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到钙元素的边框大小、元素大小。

client系列属性

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

---

元素滚动scroll系列

翻译过来就是翻滚的，我们是用的scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位。
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位。
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位。

---

mouseenter和mouseover的区别

放鼠标移动到元素上时，就会触发mouseenter事件，类似于mouseover

• mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。
• mouseenter只会经过自身盒子触发
• 之所以这样，就是因为mouseenter不会冒泡