JS获取元素宽高方法全解析

从现在开始，努力学习吧！本文《JS获取元素宽高方法详解》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

获取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 这两种模式。理解这一点，能避免很多看似奇怪的尺寸计算问题。

在传统的 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获取元素宽高方法全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！