目录
1 元素偏移量offset系列
1.1 offset概述
1.2 offset与style的区别
2 元素可视区client系列
3 元素滚动scroll系列
1 元素偏移量offset系列
1.1 offset概述
offset含义：offset的含义是偏移量，使用offset的相关属性可以动态地获取该元素的位置、大小等。
属性
说明
offsetLeft
返回元素相对其带有定位的父元素左边框的偏移
offsetTop
返回元素相对其带有定位的元素上方的偏移父
offsetWidth
返回自身的宽度（包括padding、边框和内容区域的宽度）。注意返回数值不带单位
offsetHeight
返回自身的高度（包括padding、边框和内容区域的高度）。注意返回数值不带单位
offsetParent
返回作为该元素带有定位元素的父级元素（如果父级都没有定位则返回body）
获取鼠标位置：鼠标指针在盒子内的坐标位置示意图分析。
示例：写一个盒子，在终端输出这个盒子的宽度和高度，获取并输出鼠标指针在盒子内的坐标
鼠标每在盒子中移动一点，终端就会输出相应的坐标。
1.2 offset与style的区别
offset
style
offset可以得到任意样式表中的样式值
style只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的
style.width获得的是带有单位的字符串
offsetWidth包含padding、border、width的值
style.width获得的是不包含padding、border的值
offsetWidth等属性是只读属性，只能获取不能赋值
style.width是可读写属性，可以获取也可以赋值
2 元素可视区client系列
client系列：client中文意思是客户端，通过使用client系列的相关属性可以获取元素可视区的相关信息。
属性
说明
clientLeft
返回元素左边框的大小
clientTop
返回元素上边框的大小
clientWidth
返回自身的宽度（包含padding），内容区域的宽度（不含边框）。注意返回数值不带单位
clientHeight
返回自身的高度（包含padding），内容区域的高度（不含边框）。注意返回数值不带单位
示例：输出元素上、左边框的大小，以及自身的宽度和高度
3 元素滚动scroll系列
scroll含义：scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。
属性
说明
scrollLeft
返回被卷去的左侧距离，返回数值不带单位
scrollTop
返回被卷去的上方距离，返回数值不带单位
scrollWidth
返回自身的宽度，不含边框。注意返回数值不带单位
scrollHeight
返回自身的高度，不含边框。注意返回数值不带单位
示例：获取自身的高度和宽度，获取div卷起来的高度
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
到此这篇关于JavaScript三种常用网页特效详解的文章就介绍到这了,更多相关JavaScript网页特效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
JS实现网页导航条特效
JS实现网页时钟特效
利用JS做网页特效_大图轮播(实例讲解)
基于JQuery和原生JavaScript实现网页定位导航特效
javascript特殊文本输入框网页特效
纯js代码制作的网页时钟特效【附实例】
javascript使用输出语句实现网页特效代码