JavaScript的网页特效(三大系列)

流川962

已于 2023-04-07 20:15:24 修改

阅读量290

点赞数

文章标签： javascript 前端 html

于 2023-03-27 23:33:08 首次发布

本文链接：https://blog.csdn.net/qq_56769697/article/details/129804593

版权

这篇文章详细介绍了JavaScript中用于处理网页特效的三个重要系列：offset系列涉及元素的偏移量，包括offsetWidth和offsetHeight等属性，以及在父元素定位和未定位情况下的offsetTop和offsetLeft。client系列关注元素可视区的尺寸，如clientWidth和clientHeight。最后，scroll系列讨论了元素滚动的相关属性，如scrollLeft和scrollTop，以及scrollWidth和scrollHeight，它们揭示了元素滚动后的实际尺寸。

摘要由CSDN通过智能技术生成

JavaScript的网页特效(三大系列)

1.元素偏移量offset系列

属性	说明
offsetWidth	返回自身的宽度（包括padding、边框和内容区域的宽度）。注意返回数值不带单位
offsetHeight	返回自身的高度（包括padding、边框和内容区域的宽度）。注意返回数值不带单位

特殊部分：
1.父元素有定位
offsetTop：元素距离父元素上侧的距离
offsetLeft:元素距离父元素左侧的距离
2.父元素没有定位
offsetTop:元素距离上侧浏览器的距离
offsetLeft：元素距离左侧浏览器的距离

2.元素可视区client系列

属性	说明
clientLeft	返回元素左边框的大小
clientTop	返回元素上边框的大小
clientWidth	返回自身的宽度（包含padding+内容区域的宽度（不含边框））。注意返回的数值不带单位
clientHeight	返回自身的高度（包含padding+内容区域的宽度（不含边框））。注意返回的数值不带单位

3.元素滚动scroll系列

属性	说明
scrollLeft	返回左右滚动条滚动的距离，返回数值不带单位
scrollTop	返回上下滚动条滚动的距离，返回数值不带单单位
scrollWidth	返回width + 滚动条滚动的距离。注意返回数值不带单位
scrollHeight	返回height + 滚动条滚动的距离。注意返回的数值不带单位