在前端开发中，我们时常需要获取元素的宽度和高度信息。然而，当元素被隐藏（display:none或者visibility:hidden）时，通常会导致无法正确获取它们的宽度和高度信息，这给开发带来了困扰。本文将介绍一些解决方案。
方案一：使用offsetWidth/offsetHeight属性
offsetWidth/offsetHeight是元素自身的宽度和高度，包括边框(border)、内边距(padding)和CSS宽度/高度，但不包括外边距(margin)。因此，即使元素被隐藏也可以正确地获取它们的宽度和高度信息。
示例代码：
-- -------------------- ---- -------
---- -------- ------------------------------------------------------ ----- -------------------
----- ------
------
--------
----- --- - -------------------------------
----------------------------- -- --- ------------ - ------------ - ----- - ------------- - -------------
------------------------------ -- -- ----------- - ----------- - ------ - -------------- - --------------
---------缺点：该方法只适用于获取已知元素的宽度和高度，在某些情况下可能需要动态计算元素宽度和高度。
方案二：使用getBoundingClientRect()方法
getBoundingClientRect()方法返回一个DOMRect对象，该对象包含元素的位置、大小信息。DOMRect对象有四个属性：left、top、right、bottom，分别表示元素左上角和右下角相对于视口（viewport）左上角的坐标值。
示例代码：
-- -------------------- ---- -------
---- -------- ------------------------------------------------------ ----- -------------------
----- ------
------
--------
----- --- - -------------------------------
----- ---- - ----------------------------
------------------------ -- --- ------------ - ------------ - ----- - ------------- - -------------
------------------------- -- -- ----------- - ----------- - ------ - -------------- - --------------
---------缺点：该方法也只适用于获取已知元素的宽度和高度，在某些情况下可能需要动态计算元素宽度和高度。
方案三：将元素转换为可见状态再获取宽度和高度
我们可以通过将元素临时显示出来来获取其宽度和高度信息，然后再将其隐藏起来。这种方式虽然会改变页面布局，但在某些特殊情况下是可行的。
示例代码：
-- -------------------- ---- -------
---- -------- ------------------------------------------------------ ----- -------------------
----- ------
------
--------
----- --- - -------------------------------
----------------- - -------- -- -------
----- ----- - ----------------
----- ------ - -----------------
----------------- - ------- -- --------
------------------- -- --- ------------ - ------------ - ----- - ------------- - -------------
-------------------- -- -- ----------- - ----------- - ------ - -------------- - --------------
---------缺点：在一些动画或者交互场景下，该方式可能会导致闪烁或者性能问题。
结论
无法获取隐藏元素宽度和高度是前端开发中常见的问题。我们可以通过使用offsetWidth/offsetHeight、getBoundingClientRect()方法或者将元素转换为可见状态再获取宽度和高度三种方式解决该问题。需要根据具体情况选择最适合的方案。
参考链接：
- MDN Web Docs: Element.offsetWidth
- [MDN Web Docs: Element.getBoundingClientRect()
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1557