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、内容区的宽度，不含边框，返回数值不带单位 |
它们的主要用法
- offset系列经常用于获得元素位置 offsetLeft offsetTop
- client经常用于获取元素大小 clientWidth clientHeight
- scroll经常用于获取滚动距离 scrollTop scrollLeft
标签：返回,特效,元素,系列,JavaScript,element,PC,offset,边框 来源： https://www.cnblogs.com/maplerain/p/16290594.html