本文主要介绍JavaScript可以实现的三种常见的网页特效：偏移系列、客户端系列、滚动系列。本文中的示例代码简单易懂，感兴趣的朋友可以看看。
目录
1元素偏移系列1.2偏移概述1.2偏移和样式的区别2元素可视区域客户系列3元素滚动系列
1 元素偏移量offset系列
1.1 offset概述
含义：offset是偏移的意思，可以利用offset的相关属性动态获取位置、大小等。这种元素。
属性
解释
偏左
返回元素相对于其定位的父元素的左边框的偏移量。
抵消
返回元素相对于其定位元素的偏移父元素。
偏移距离
返回自己的宽度(包括填充、边框和内容区域宽度)。请注意，返回值没有单位。
偏高
返回自身的高度(包括填充、边框和内容区域)。请注意，返回值没有单位。
父代
返回此元素的父元素和定位元素(如果没有定位父元素，则返回body)
获取鼠标位置：鼠标指针在框中坐标位置的示意图分析。
例子：写一个盒子，在终端输出盒子的宽度和高度，得到并输出鼠标指针在盒子里的坐标。
div id='box'/div
脚本
var box=document . query selector(# box))；
//1.输出框的宽度和高度
Console.log ('width:'，box . offsetwidth)；
Console.log ('height:'，box . offset height)；
//2.将鼠标移动事件绑定到框中
box . addevent listener(' mousemove '，函数(e) {
//2.1获取盒子的偏移量
var left=box.offsetLeft
var top=box.offsetTop
Console.log ('offset: ('left '，' top '))；
//2.2计算鼠标指针在框中的坐标
var x=e . pagex-left；
var y=e . pagey-top；
Console.log('x轴坐标：' x '，y轴坐标：' y ')；
})
/脚本
每次鼠标在框内移动，终端都会输出相应的坐标。
1.2 offset与style的区别
抵消
风格
Offset可以获取任何样式表中的样式值。
Style只能在内联样式表中获取样式值。
通过偏移系列获得的值没有单位。
Style.width获取带有单位的字符串。
OffsetWidth包含填充、边框和宽度的值。
style.width获得的值不包括填充和边框。
offsetWidth之类的属性是只读的，只能获取，不能赋值。
Style.width是一个读写属性，可以获取也可以赋值。
2 元素可视区client系列
系列：客户是指中文的客户。您可以通过使用客户端系列的相关属性来获取元素可见区域的相关信息。
属性
解释
客户端左侧
返回元素左边框的大小。
客户端顶部
返回元素上边框的大小。
客户端宽度
返回自身的宽度(包括填充)和内容区域的宽度(不包括边框)。请注意，返回值没有单位。
客户端高度
返回自身的高度(包括填充)和内容区域的高度(不包括边框)。请注意，返回值没有单位。
示例：输出元素的上边框和左边框的大小，以及它自己的宽度和高度。
分区/分区
风格
部门{
宽度：100px
高度：100px
背景色：浅绿色；
边框：3px纯黄；
}
/风格
脚本
//获取div元素
let div=document . query selector(' div ')；
//输出元素左边框和上边框的大小
Console.log('左边界大小：'，div . client left)；
Console.log('上边框的大小：'，div . client top)；
//输出元素本身的宽度和高度(无边框)
Console.log('宽度为：'，div . client width)；
Console.log ('height is:'，div . client height)；
/脚本
3 元素滚动scroll系列
滚动含义：Scroll表示滚动，以及滚动的距离、大小等。元素的属性可以通过使用scroll系列的相关属性动态获得。
属性
解释
滚动左
返回向左扫描的距离，返回值没有单位。
滚动顶部
返回累计距离，返回值没有单位。
滚动宽度
返回自身的宽度，不带边框。请注意，返回值没有单位。
滚动高度
返回自身的高度，不带边框。请注意，返回值没有单位。
示例：获取它自己的高度和宽度，并获取该div卷起的高度。
差异
我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足，我满足
/divbr
点击按钮以获得卷/按钮的高度和宽度
风格
部门{
宽度：200px
高度：100px
背景色：粉色；
/*滚动无法显示的元素*/
溢出：滚动；
}
/风格
脚本
//1，获取页面中的元素div和button。
let div=document . query selector(' div ')；
let button=document . query selector(' button ')；
//2，输出自己的高度和宽度
Console.log ('height is:'，div . scroll height)；
Console.log ('width is:'，div . scroll width)；
//注册按钮的click事件，点击后输出滚动的高度和宽度。
button.addEventListener('click '，function () {
Console.log ('rolled up height:'，div . scroll top)；
Console.log ('rolled width:'，div . scroll left)；
})
/脚本
关于三种常见JavaScript web效果的详细解释，本文到此结束。更多相关的JavaScript web effects，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。