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不会冒泡