获取dom元素尺寸时，clientwidth/clientheight返回内容+内边距，不包括边框、外边距和滚动条，适合计算内部可用空间；2. offsetwidth/offsetheight返回内容+内边距+边框+滚动条，反映元素在页面中实际占据的物理空间，适用于布局计算和拖拽场景；3. getboundingclientrect().width/height返回元素在视口中的实际渲染尺寸，包含边框和内边距，并受css transform影响，是获取视觉尺寸的唯一准确方式；4. getcomputedstyle().width/height返回css计算值，其含义受box-sizing影响，在content-box下为内容区尺寸，在border-box下为包含边框和内边距的总尺寸，适合获取样式定义的宽度而非实际布局尺寸；因此，选择哪个方法取决于具体需求：若需内部可用空间用clientwidth，若需布局尺寸用offsetwidth，若涉及transform的视觉尺寸用getboundingclientrect，若需解析css定义值用getcomputedstyle，且需注意box-sizing和滚动条对结果的影响。
在JavaScript中，要获取一个DOM元素的宽度和高度，我们通常会用到几种不同的属性或方法，它们各自代表的“尺寸”含义略有不同，这在使用时需要特别留意。核心来说，我们可以通过
clientWidth
/
clientHeight
、
offsetWidth
/
offsetHeight
、
getBoundingClientRect().width
/
height
，以及
getComputedStyle().width
/
height
来实现。理解它们之间的差异，是高效前端开发的关键一步。
clientWidth
和
clientHeight
会返回元素内容区域的宽度和高度，包括内边距（padding），但不包括边框（border）、外边距（margin）和滚动条。
offsetWidth
和
offsetHeight
则返回元素的完整渲染尺寸，包括内容、内边距和边框，如果存在滚动条，也会将其宽度或高度计算在内。
getBoundingClientRect()
方法会返回一个
DOMRect
对象，其中包含元素的
width
和
height
属性。这两个值表示元素在视口中的实际渲染尺寸，包括了内边距和边框，并且更重要的是，它们会考虑CSS
transform
属性（如
scale
或
rotate
）对元素尺寸的影响。
getComputedStyle()
方法获取的是元素所有最终计算的样式。通过它获取的
width
和
height
属性，反映的是CSS盒模型下元素
width
和
height
属性的计算值，这通常是内容区域的尺寸，除非
box-sizing
属性被设置为
border-box
。
// 假设有一个ID为 'myElement' 的元素const element = document.getElementById('myElement');// 1. clientWidth / clientHeight (内容 + 内边距)const clientWidth = element.clientWidth;const clientHeight = element.clientHeight;// console.log('clientWidth:', clientWidth, 'clientHeight:', clientHeight);// 2. offsetWidth / offsetHeight (内容 + 内边距 + 边框 + 滚动条)const offsetWidth = element.offsetWidth;const offsetHeight = element.offsetHeight;// console.log('offsetWidth:', offsetWidth, 'offsetHeight:', offsetHeight);// 3. getBoundingClientRect().width / height (实际渲染尺寸，包含边框和内边距，考虑transform)const rect = element.getBoundingClientRect();const rectWidth = rect.width;const rectHeight = rect = rect.height;// console.log('getBoundingClientRect().width:', rectWidth, 'getBoundingClientRect().height:', rectHeight);// 4. getComputedStyle().width / height (CSS计算值，通常是内容区，受box-sizing影响)const computedStyle = getComputedStyle(element);const computedWidth = parseFloat(computedStyle.width); // 通常返回带单位的字符串，需要解析const computedHeight = parseFloat(computedStyle.height);// console.log('getComputedStyle().width:', computedWidth, 'getComputedStyle().height:', computedHeight);
clientWidth、offsetWidth、getBoundingClientRect()，我到底该用哪个？
这确实是个让人头疼的选择题，毕竟它们看起来都和“尺寸”有关，但实际应用场景却大相径庭。我的经验是，没有哪个是“万能”的，关键在于你究竟想测量什么。
如果你关心的是元素内部可用的空间，比如你想往一个容器里塞内容，又不想内容被边框挤压，那么
clientWidth
和
clientHeight
是你的首选。它给出的就是内容区域加上内边距的尺寸，非常适合用来计算内部布局，或者判断元素是否有滚动条（通过
scrollWidth
和
clientWidth
对比）。
offsetWidth
和
offsetHeight
则更像是“这个元素在页面上实际占了多大地方”的答案。它把边框和可能的滚动条都算进去了，对于需要知道一个元素完整占据空间进行布局计算（比如计算一个浮动元素旁边的空间，或者检测两个元素是否重叠）时，它就显得非常实用。我个人在做一些拖拽或者动态调整大小的组件时，常常会依赖
offsetWidth
来获取元素的实际物理宽度。
而
getBoundingClientRect()
，在我看来，它是获取元素在视口中“真实视觉尺寸”的王者。尤其是当你处理那些经过CSS
transform
（比如
scale()
放大缩小，或者
rotate()
旋转）的元素时，
offsetWidth
和
clientWidth
就不再能准确反映它的视觉大小了，它们只会给出元素变换前的布局尺寸。但
getBoundingClientRect()
会忠实地告诉你，这个元素现在在屏幕上看起来有多宽多高，这对于实现精确的动画、碰撞检测或者需要知道元素相对于视口位置的场景来说，简直是不可替代的。它甚至能帮你检测元素是否完全进入了视口。
至于
getComputedStyle().width/height
，它更像是去问CSS引擎：“你最终给这个元素的
width
属性计算出来的值是多少？”这个值往往是CSS属性的计算结果，比如你设置
width: 50%
，它会返回一个具体的像素值。但它有个“坑”，就是它返回的是CSS
width
属性的值，这个值在
box-sizing: content-box
模式下不包含内边距和边框，在
border-box
模式下才包含。所以，如果你想获取的是CSS定义的尺寸，而不是元素实际占据的物理空间，它就很有用。但如果目的是获取元素的实际显示尺寸，它就容易让人混淆。
盒模型对这些尺寸有什么影响？
CSS盒模型（Box Model）对JavaScript获取元素尺寸的影响是相当深远的，特别是
content-box
和
border-box
这两种模式。理解这一点，能避免很多看似奇怪的尺寸计算问题。
百度·度咔剪辑
度咔剪辑，百度旗下独立视频剪辑App
3 查看详情
在传统的
content-box
模型下（这是默认行为），你设置的
width
和
height
属性仅仅定义了元素“内容区域”的尺寸。这意味着，如果你给一个元素设置
width: 100px; padding: 10px; border: 1px solid black;
，那么它的实际总宽度会是
100px (内容) + 10px*2 (左右padding) + 1px*2 (左右border) = 122px
。
在这种情况下：
clientWidth
和
clientHeight
会返回
内容 + 内边距
的尺寸，即
100px + 10px*2 = 120px
。
offsetWidth
和
offsetHeight
会返回
内容 + 内边距 + 边框
的总尺寸，即
122px
。
getComputedStyle().width
会返回你CSS中设置的
100px
（即内容区域的宽度），因为它直接反映了CSS
width
属性的计算值。
getBoundingClientRect().width
则会返回元素的实际渲染宽度，也就是
122px
，因为它总是给出元素在屏幕上占据的真实像素尺寸。
而当
box-sizing
被设置为
border-box
时，情况就完全不同了。在这种模式下，你设置的
width
和
height
属性，包含了内容、内边距和边框。也就是说，如果你设置
width: 100px; padding: 10px; border: 1px solid black;
，那么这个元素的总宽度就是
100px
。内容区域的宽度会自动缩小以适应内边距和边框。
在这种
border-box
模式下：
clientWidth
和
clientHeight
依然返回
内容 + 内边距
的尺寸。由于总宽度是100px，内边距和边框占了22px，那么内容区就是78px。所以
clientWidth
会是
78px (内容) + 10px*2 (左右padding) = 98px
。
offsetWidth
和
offsetHeight
依然返回
内容 + 内边距 + 边框
的总尺寸，所以它会是
100px
。
getComputedStyle().width
会返回你CSS中设置的
100px
，因为在
border-box
模式下，CSS
width
属性就包含了边框和内边距。
getBoundingClientRect().width
同样会返回元素的实际渲染宽度，也就是
100px
。
所以，如果你在项目中大量使用
border-box
，那么
offsetWidth
和
getComputedStyle().width
在获取元素总宽度时会给出相同的值（即你CSS里设置的
width
值），这会简化很多计算。但如果混用
content-box
，就需要对这些属性返回值的具体含义保持清醒的认识。
CSS动画和滚动条对元素尺寸获取的影响与应对
在实际开发中，元素尺寸的获取不仅仅是静态的，它还会受到一些动态因素的影响，比如CSS动画（特别是
transform
）和滚动条。这些因素如果不被正确理解，很容易导致尺寸计算的偏差。
滚动条的影响：这是个比较常见的“陷阱”。当一个元素的内容溢出并产生了滚动条时，这个滚动条本身会占据一定的空间。
offsetWidth
和
offsetHeight
会把滚动条占据的空间计算在内。也就是说，如果一个
div
宽度是
200px
，但由于内容溢出出现了垂直滚动条，并且这个滚动条占用了
17px
宽度，那么
offsetWidth
依然会是
200px
。
clientWidth
和
clientHeight
则不会包含滚动条的宽度/高度。在上述例子中，
clientWidth
会是
200px - 17px = 183px
。这是
clientWidth
最常用的一个场景：获取元素内部可用于放置内容的实际宽度，不包括滚动条。
getBoundingClientRect().width/height
和
getComputedStyle().width/height
的行为与
offsetWidth/offsetHeight
类似，它们返回的尺寸通常会包含滚动条占据的空间。
所以，如果你需要知道元素内部“真正能放东西”的区域大小，
clientWidth/clientHeight
是你的朋友。如果你需要元素的总物理尺寸，包括滚动条在内，那么
offsetWidth/offsetHeight
或
getBoundingClientRect()
更合适。
CSS
transform
的影响：这是另一个容易让人困惑的地方。CSS
transform
属性，比如
scale()
、
rotate()
、
skew()
等，会改变元素的视觉呈现，但并不会改变其在文档流中的“布局”尺寸。
offsetWidth
和
offsetHeight
不会受到
transform
属性的影响。它们返回的是元素在应用
transform
之前的原始布局尺寸。
clientWidth
和
clientHeight
也同样 不会 受到
transform
属性的影响。它们也返回的是元素变换前的内部尺寸。
getComputedStyle().width/height
返回的更是CSS属性的计算值，它也 不会 考虑
transform
。
那么，如果你有一个元素被
transform: scale(2);
放大了两倍，但你用
offsetWidth
获取到的还是它放大前的尺寸，这显然不是你想要的视觉尺寸。这时候，
getBoundingClientRect()
就派上用场了：
getBoundingClientRect().width
和
getBoundingClientRect().height
会 考虑
transform
属性。它们返回的是元素经过所有
transform
变换后，在视口中实际占据的视觉尺寸。这对于实现精确的视觉效果、拖拽边界、或者判断元素是否进入视口等场景至关重要。
举个例子，如果你有一个
div
宽度是
100px
，然后你给它添加了
transform: scale(2);
。
offsetWidth
仍然是
100px
。
getBoundingClientRect().width
则会是
200px
。
因此，在处理动态效果和复杂布局时，要根据你的具体需求，选择最能反映你所关心“尺寸”的API。如果涉及视觉尺寸和变换，
getBoundingClientRect()
几乎是唯一的选择。如果只是布局尺寸，其他属性则各有侧重。
以上就是js怎么获取元素的宽度和高度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/232554.html
微信扫一扫 
支付宝扫一扫 
