确定 DOM 元素可能增长到的最大宽度？

Question

我有兴趣查询浏览器中 DOM 元素可能增长到的最大大小。众所周知，空 DOM 元素（没有样式）的 .clientWidth 为 0，但添加文本/图像/等。元素可能会导致其宽度增加。thisOne以下面结构中的DOM 元素为例：

<table style="padding: 20px; border-spacing: 100px">
   <tr>
       <td></td>
       <td>
            <div id="thisOne"></div>
       </td>
   </tr>
</table>

目前#thisOne.clientWidth === 0，但如果我向其附加大量文本，它的宽度会不断增大，但直到它达到为止，document.body.clientWidth因为列、填充类等。我想知道如何计算出对象的当前最大宽度不做类似的事情：

const thisOne = document.getElementById('thisOne');
thisOne.style.visibility = 'hidden';  // do not display to user.
thisOne.innerHTML = 'blah '.repeat(2000);
const maxWidth = thisOne.clientWidth;
thisOne.innerHTML = '';
thisOne.style.visibility = 'visible';

基于 JQuery 的答案很好，但了解纯 HTML/JS 版本会更好。

（如果有人想知道，我计划将音乐符号的 SVG 放入 div 中，但我希望通过在添加之前为渲染器提供适合的宽度，使其能够很好地包裹到其他行上）

Answer 1

您可以做的是将表格的宽度设置为100%（因此它占用容器的所有可用空间）。设置其他列 ( <td>) 的所需宽度，固定或 %。#thisOne并设置包含to的列的宽度100%，它将跨越到剩余的可用空间（<div>是一个块，因此默认情况下它将使用整个宽度）。

\n

<table style="padding: 20px; border-spacing: 100px; width: 100%">\n   <tr>\n       <td style="width: 100px"></td>\n       <td style="width: 100%">\n            <div id="thisOne"></div>\n       </td>\n   </tr>\n</table>\n

\n

现在，#thisOne将占用所有可用空间，您可以使用 获得它的宽度#thisOne.clientWidth。

\n

如果您不想#thisOne默认情况下采用整个宽度（即，当它为空时），您可以简单地不将其容器td宽度设置为100%并在获取之前通过代码执行此操作#thisOne.clientWidth（但您必须clientWidth在 a 中获取，setTimeout因为浏览器需要在更改之前计算布局clientWidth）。

\n

正如所\xe5\xb0\x8f\xe8\x81\xaa\xe8\x81\xaa\xe5\x88\xb0\xe6\xad\xa4\xe4\xb8\x80\xe6\xb8\xb8指出的，您还可以使用display: flex和flex-grow来实现相同的目标。

\n

<div style="display: flex">\n    <div style="flex-grow: 0"></div>\n    <div style="flex-grow: 1" id="thisOne"></div>\n</div>\n

\n