【Javascript】元素偏移、元素大小的获取offset、client()

最新推荐文章于 2024-09-16 08:47:17 发布

玖夜Kty

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量146

点赞数

分类专栏：前端 web html 文章标签： javascript css css3

本文链接：https://blog.csdn.net/weixin_44587107/article/details/121004035

版权

web 同时被 3 个专栏收录

47 篇文章 1 订阅

订阅专栏

html

44 篇文章 0 订阅

订阅专栏

前端

41 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM中offset和client系列属性的用途和区别，包括如何获取元素的位置、尺寸以及与样式值的关系。offsetWidth和offsetHeight包含边框和内边距，而style.width和.style.height则不包含这些。offset系列属性适用于获取元素的绝对位置，而client系列用于获取内容区域的可视尺寸。了解这些属性有助于精准地操作和布局网页元素。

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

特效篇Effects

offset

隶属于DOM
我们使用offset系列相关属性可以动态地得到该元素的位置偏移、大小等
需要注意的是返回的值都不带单位

属性/方法	描述
element.offsetHeight	返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）
element.offsetWidth	返回元素的宽度，包括边框（border）和内边距（padding），但不包含外边距（margin）
element.offsetLeft	返回当前元素的相对水平偏移位置的偏移容器
element.offsetParent	返回元素的偏移容器
element.offsetTop	返回当前元素的相对垂直偏移位置的偏移容器

区别

offset	style
可以得到任意样式表中的样式值	只能得到行内样式的样式值
获取到的数值是没有单位的	获得到的值是由单位的
offsetWidth包含padding+border+width	style.width获得不包含padding和border的值
只能获取(只读)属性，不能设置属性或赋值	可以读写任何行内样式属性
如果只想要获取大小位置，用offset更合适	如果想要给元素更改值，则要使用style来改变

client系列也能获得元素大小？

属性	描述
element.clientTop	表示一个元素的顶部边框的宽度，以像素表示。
element.clientLeft	表示一个元素的左边框的宽度，以像素表示。
element.clientHeight	在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）
element.clientWidth	在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）