DOM元素三大系列
作者：互联网
offset元素偏移量
获取元素距离带有定位父元素的位置
获取元素自身的大小(宽度高度)
返回的数组不带单位
offset常用属性
element.offsetParent 返回作为该元素带有定位的父级元素,如果父级没有定位则返回body
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth 返回自身包括padding 边框,内容区的宽度,返回值不带单位
element.offsetHeight 返回自身包括padding 边框,内容区的高度,返回值不带单位
offset与style的区别
style只能获取行内样式表中的样式值
style获取的是带有单位的字符串(offset数字型的不带单位)
style不包含padding和border值
offset是只读属性 style可以获取也可以赋值
所以 我们想要获取元素大小位置用offset 给元素更改值用style
元素可视区client系列
client翻译过来是客户端,我们使用client的相关属性获取元素可视区的相关信息,通过client系列的相关属性可以动态得到该元素的边框大小,元素大小等
与offsetWidth最大的区别是不包含边框
client常用属性
element.clientTop 返回该元素上边框的大小
element.clientLeft 返回该元素左边框的大小
element.clientWidth 返回自身包括padding,内容区的宽度,不含边框,返回值不带单位
element.clientHeight 返回自身包括padding,内容区的高度,不含边框,返回值不带单位
scroll系列
scroll事件当我们滚动条发生变化的时候会触发事件
scroll常用属性
scroll翻译过来是滚动的,我们用scroll系列的相关属性可以动态的的到该元素的大小,滚动距离等
element.scrollTop 返回被卷去上侧的距离,返回值不带单位
element.scrollLeft 返回被卷去左侧的距离,返回值不带单位
element.scrollWidth 返回自身的实际宽度 不含边框返回值不带单位
element.scrollHeight 返回自身的实际高度 不含边框返回值不带单位
三大系列总结
element,offsetWidth 返回自身包括padding边框内容区的高度,返回值不带单位
element,clientWidth 返回自身包括padding 内容区的高度,不含边框返回值不带单位
element.scrollWidth 返回自身实际高度,不含边框返回值不带单位
- offset系列经常用于获取元素位置
- client经常用来获取元素大小
- scroll用于获取滚动距离
页面的滚动通过window.pagexoffset获取
offset系列包含了border其他两个不包含而scroll包含了超出部分
扩展
用于获取某个元素相对于视窗的位置集合,集合中top,right,bottom,left等属性
rectobject=ele.getBoundingClientRct()
rectobject.top元素上边到视窗上边的距离
rectobject.right元素右边到视窗左边的距离
rectobject.bottom元素下边到视窗上边的距离
rectobject.left元素左边到视窗左边的距离
----------------------------------------------完结,散花---------------------------------------
-----------------------接受大佬们的批改,欢迎留言----------------------------------------------------------
标签：返回,不带,DOM,元素,element,返回值,边框,三大 来源： https://blog.csdn.net/qq_63358859/article/details/121058492