用javascript测试模拟的html元素宽度答案

【问题标题】：Test simulated html element width with javascript用javascript测试模拟的html元素宽度
【发布时间】：2022-08-10 00:17:09
【问题描述】：

用例

我想检测 html 表格是否太宽，如果是这样，我想将表格标题单元格翻转为垂直（例如使用writing-mode: vertical-lr;）。

我想在调整大小时更新它：如果视口变大，单元格中的文本可能会再次变为水平。

翻转条件是带有水平标签的原始表格是否会比其容器宽。

如何确定表格的宽度将有使用水平标签，而不改变表格本身？

我目前的想法是制作带有水平标签的表格的不可见副本，并将其用作“传感器”。但我担心这会污染 DOM 并在某处造成副作用。此外，我需要一直更新此副本。

是否有“最佳实践”或已知模式来解决这个问题？

您可以使用媒体查询确定宽度。当他更大时，给定的像素/宽度使表格垂直。像这样@media only screen and (max-width: 600px)
@Minimumspace 好吧，但这不会是动态的。我必须事先知道单元格需要垂直的视口宽度，以及哪个表。

【解决方案1】：

其实很简单：

我们能够在脚本运行期间更改桌子上的 css。一旦我们查询像element.width 这样的属性，这将在脚本执行期间导致重排，但不会导致重绘。所以这意味着我们可以在不需要克隆 DOM 元素的情况下进行测试，并且不需要可见的更改。

【讨论】：