从PC端网页特效开始进阶Day13

晋龍

已于 2022-06-20 22:05:38 修改

阅读量110

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2022-06-20 22:03:55 首次发布

本文链接：https://blog.csdn.net/qq_46051366/article/details/125238363

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

目录、

3.3mouseenter 和mouseover的区别

1、元素偏移量offset系列

1.1 offset概述

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

获得元素距离带有定位父元素的位置

获得元素自身的大小（宽度高度)

注:返回的数值都不带单位

offset系列常用属性︰

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

1.2offset和style的区别

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

2、元素可视区client系列

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

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

3、元素滚动scroll 系列

3.1元素scroll系列属性

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

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

3.2页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。

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

三大系列总结
主要用法∶
（1） offset系列经常用于获得元素位置offsetLeft offsetTop
（2）client经常用于获取元素大小clientWidth clientHeight
（3）scroll经常用于获取滚动距离scrollTop scrollLeft
（4）注意页面滚动的距离通过window.pagexoffset获得