在前端开发中，有时候需要获取页面上的某个元素的宽度或高度，但该元素可能被设置为 display:none 或 visibility:hidden 等隐藏状态。此时，我们就需要使用一些技巧来获取元素的准确尺寸。
常规方法
通常情况下，使用 offsetWidth 或 offsetHeight 可以获取一个元素的宽度或高度，但是这两个属性只能获取可见元素的尺寸，对于隐藏元素则无法获取到正确的值。
获取隐藏元素的宽高
方法一：将元素显示出来再获取尺寸
一种简单的思路是，先将该元素显示出来，然后获取其尺寸信息，最后将元素再隐藏起来。示例代码如下：
// 将 id 为 "myElement" 的元素显示出来，获取其宽高并保存
const myElement = document.getElementById("myElement");
myElement.style.display = "block"; // 显示元素
const width = myElement.offsetWidth; // 获取宽度
const height = myElement.offsetHeight; // 获取高度
myElement.style.display = "none"; // 隐藏元素这种方法的问题在于，如果该元素本身就是隐藏状态，那么调用 style.display = "block" 后会改变其原有的显示状态。因此，使用这种方法要格外小心。
方法二：复制节点再获取尺寸
另一种方法是，将该元素的副本插入到文档中去，然后获取其尺寸信息。由于副本未被隐藏，因此可以正确获得其宽高。示例代码如下：
// 将 id 为 "myElement" 的元素复制一份并插入到文档中，获取其宽高并保存
const myElement = document.getElementById("myElement");
const clonedElement = myElement.cloneNode(true); // 复制节点
clonedElement.style.visibility = "hidden"; // 隐藏副本
document.body.appendChild(clonedElement); // 插入副本到文档
const width = clonedElement.offsetWidth; // 获取宽度
const height = clonedElement.offsetHeight; // 获取高度
document.body.removeChild(clonedElement); // 从文档中移除副本这种方法的优点在于不会改变原有节点的状态，但缺点也很明显，即需要进行节点复制和添加操作，对性能方面可能会产生一定的压力。
结语
在实际前端开发中，我们常常需要获取某个元素的准确尺寸信息，而这个元素又可能处于隐藏状态。针对这种情况，我们可以通过将元素显示出来或者复制副本来获取其尺寸信息。不同的方法各有利弊，在实际应用时需要根据具体情况进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1756