无法获取隐藏元素宽度和高度的解决方案

要获取一个元素的宽度和高度并不难，但如果该元素具有CSS属性 display: none 或者使用 opacity: 0 隐藏的话，我们就无法通过直接获取元素的宽度和高度来获取其准确值。那么如何解决这个问题呢？

解决方案

方案一：使用visibility属性

这个方案相对比较简单，只需要使用 visibility 属性替换 display 属性，并将其设置为 hidden 即可。

.hidden-element {
  visibility: hidden;
}

var element = document.querySelector('.hidden-element');
var width = element.offsetWidth;
var height = element.offsetHeight;

这样就可以正常获取到该元素的宽度和高度了。

方案二：使用clone元素

这个方案需要将元素克隆一份出来，然后将克隆出来的元素插入到文档中，再通过获取克隆元素的宽度和高度来获取原始元素的宽度和高度。

<div class="clone-me">
  <p>Hello World!</p>
</div>

var element = document.querySelector('.clone-me');
var clone = element.cloneNode(true);
clone.style.position = 'fixed';
clone.style.top = '-9999px';
clone.style.left = '-9999px';
document.body.appendChild(clone);

var width = clone.offsetWidth;
var height = clone.offsetHeight;

document.body.removeChild(clone);

以上代码中，我们将 clone-me 元素克隆出来，并将其样式设置为不可见，然后将其插入到文档的一个不可见位置。这样我们就可以通过 clone 元素获取到 element 元素的宽度和高度了。

示例说明

示例一：使用visibility属性

假设我们有一个元素，其样式如下：

.hide-me {
  display: none;
}

我们无法通过获取该元素的宽度和高度：

var element = document.querySelector('.hide-me');
var width = element.offsetWidth;    // 返回0
var height = element.offsetHeight;  // 返回0

此时我们可以将 display 属性替换为 visibility 属性，将其设置为 hidden：

.hide-me {
  visibility: hidden;
}

然后就可以正常获取到该元素的宽度和高度了：

var element = document.querySelector('.hide-me');
var width = element.offsetWidth;    // 正确获取元素宽度
var height = element.offsetHeight;  // 正确获取元素高度

示例二：使用clone元素

假设我们有一个元素，其样式如下：

.hide-me {
  opacity: 0;
}

我们无法通过获取该元素的宽度和高度：

var element = document.querySelector('.hide-me');
var width = element.offsetWidth;    // 返回0
var height = element.offsetHeight;  // 返回0

此时我们可以将该元素克隆一份，并将克隆出来的元素插入到文档中：

var element = document.querySelector('.hide-me');
var clone = element.cloneNode(true);
clone.style.position = 'fixed';
clone.style.top = '-9999px';
clone.style.left = '-9999px';
document.body.appendChild(clone);

var width = clone.offsetWidth;
var height = clone.offsetHeight;

document.body.removeChild(clone);

这样我们就可以通过 clone 元素获取到 element 元素的宽度和高度了。