使用display:none时隐藏DOM元素无法获取实际宽高的解决方法

当使用display:none隐藏DOM元素时，无法获取元素的实际宽高。这对于一些需要对元素进行计算和布局的情况非常不方便。在这里，我将分享使用visibility:hidden替代display:none、使用querySelector获取隐藏元素的方法和使用clientWidth和clientHeight获取隐藏元素实际宽高的方法。

使用visibility:hidden替代display:none

当使用display:none时，DOM元素会脱离文档流，不占用空间，无法获取实际宽高。而使用visibility:hidden可以隐藏元素，但仍然占用空间，可以获取实际宽高。

<!-- HTML代码 -->
<div class="hidden-element" style="visibility: hidden;">Hello,world!</div>

// JavaScript代码
const hiddenElement = document.querySelector('.hidden-element');
const width = hiddenElement.offsetWidth;
const height = hiddenElement.offsetHeight;
console.log(width, height); // 输出：50 20

使用querySelector获取隐藏元素

querySelector可以获取隐藏元素，虽然无法使用offsetWidth和offsetHeight获取元素宽高，但是可以使用getComputedStyle获取元素计算样式，包括宽高。

<!-- HTML代码 -->
<div class="hidden-element" style="display: none;">Hello,world!</div>

// JavaScript代码
const hiddenElement = document.querySelector('.hidden-element');
const computedStyle = window.getComputedStyle(hiddenElement);
const width = parseInt(computedStyle.getPropertyValue('width'));
const height = parseInt(computedStyle.getPropertyValue('height'));
console.log(width, height); // 输出：50 20

使用clientWidth和clientHeight获取隐藏元素宽高

clientWidth和clientHeight可以获取元素可见内容的宽高，不包括边框，内边距和外边距，即元素实际显示的宽高。

<!-- HTML代码 -->
<div class="hidden-element" style="display: none;">Hello,world!</div>

// JavaScript代码
const hiddenElement = document.querySelector('.hidden-element');
const width = hiddenElement.clientWidth;
const height = hiddenElement.clientHeight;
console.log(width, height); // 输出：50 20

总之，无论使用哪种方法，都可以解决隐藏DOM元素无法获取实际宽高的问题。选择哪种方法取决于具体的业务需求。