DOM操作盒子模型的13个api_dom盒子模型的13个属性分别代表啥-优快云博客

本文详细介绍了DOM操作盒子模型的13个API，包括client系列、offset系列和scroll系列。client系列关注内容区域及边框大小，offset系列涉及绝对定位元素的尺寸和位置，而scroll系列则关注内容的滚动距离。每个API的功能、适用场景及注意事项均有说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM中盒子模型的API分为3个系列：

client系列

offset系列

scroll系列

client系列：

clientWidth：获取box的内容区域->width+左右padding(可视区域的宽度，padding也是盒子的可视区域。。)

clienHeight：获取box的内容区域->height+上下padding (可视区域的高度)

clientTop：获取盒子的上边框大小

clientLeft：获取盒子的左边框大小

注意：1）clientWidth,clientHeight,clientTop,clientLeft只能获取值，不能设置值

offset系列：

offsetWidth:box.offsetWidth在clienWidth的基础上加上border

offsetHeight:box.offsetHeight在clientHeight的基础上加了border

offsetTop:取一个绝对定位元素，相对于参考点的上边的距离

offseLeft：取一个据对定位元素，相对于参考点的左边的距离

offsetParent():获取一个绝对定位元素的参考点

scroll系列：

scrollWidth：内容没有溢出的情况下：scrollWidth=clientWidth，内容溢出时约等于内容的真实高度只能获取值，不能设置值

scrollHeighht：在没有内容溢出的情况下：scrollHeight = clientHeight，内容溢出时约等于内容真实高度只能获取值，不能设置值

scrollTop:获取垂直滚动条滚动的距离（获取垂直滚动条卷去的高度） 不只可以获取，也可以设置

scrollLeft:特殊：获取水平滚动条滚动的距离不只可以获取，也可以设置

获取一张网页可视区的高度：

document.body.clientHeight

获取一张网页真实的高度：

document.body.scrollHeight

获取一张网页卷去的高度：

document.body.scrollTop

获取当前页面真实内容的高度：

//下面两种方式都可以获得
document.body.scrollHeight 
document.documentElement.scrollHeight

获取当前页面卷上去高度：

document.body.scrollTop
document.documentElement.scrollTop

一张网页卷上去的最大高度：

scrollHeight - clientHeight

注意：

1）这13个API获取的值，都只是一个数字，没有单位

2）获取的值是一个整数，不是小数，即使是小数，获取时，也给转化成整数

3）client系列不管你的内容是否溢出，得到盒子的可视区域