JavaScript基础——PC端网页特效导读

元素偏移量 offset 系列

offset 概述

offset 翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

• 获得元素剧烈带有定位父元素的位置
• 获得元素自身的大小（宽度高度）

返回的数值都不带单位

offset系列常用的属性：

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

offset与style区别

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

元素可视区client系列

offset概述

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

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

立即执行函数

立即执行函数(function(){})()
主要作用：创建一个独立的作用域。

元素滚动scroll系列

元素scroll系列属性

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

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

三大系列总结

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding、边框、内容区的宽度。返回数值不带单位
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位

它们的主要用法

1. offset系列经常用于获得元素位置 offsetLeft offsetTop
2. client经常用于获取元素大小 clientWidth clientHeight
3. scroll经常用于获取滚动距离 scrollTop scrollLeft