时间戳

首页 > 解决方案 > 确定 DOM 元素可能增长到的最大宽度？

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

问题描述

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

<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，但我希望它通过在添加之前给渲染器一个适合的宽度来很好地包裹到其他行上）

标签： javascriptcssdomlayoutwidth

解决方案

推荐阅读