javascript - 如何在DIV可见前获取clientWidth & clientHeight

Question

我想在 style.display='none;' 时获取 DIV 元素(用于在光标位置显示弹出菜单)的尺寸，但是 DIV 的尺寸总是返回 0。我似乎能够获得尺寸的唯一方法是使 DIV style.display='block;' 位于 0,0，然后将其移动到所需位置，但是看起来很紧张。

我试过使 DIV 在可见屏幕区域之外可见，但这不起作用。有没有办法在隐藏 DIV 的同时获取 clientWidth 和 clientHeight 值？

Answer 1

如果您的 DIV 不可见，您将无法获得它的尺寸。

但是，有一个解决方法。您的 div 必须“可见”，但这并不意味着它的不透明度和位置必须为 1 且相对。

将不透明度设置为 0，将位置设置为“绝对”，您将能够获得 DIV 尺寸。

---

编辑

因为我认为会有更多人遇到类似问题，所以我觉得我应该多解释一下我的答案。

如果您尝试使用 JavaScript 获取隐藏元素的大小，您将始终获得 0。

所以有一些技术可以在不向用户显示元素的情况下获得实际大小。我最喜欢的是我上面已经写过的那个。以下是更详细的步骤:

1. 您将元素的不透明度设置为 0。这样，当您获取尺寸时，它不会显示给最终用户。

2. 您将元素位置设置为“绝对”。这样它就不会占用任何空间。

3. 现在可以安全地将显示设置为“inline-block”。

4. 您阅读了元素尺寸。这次您将获得真正的值(value)。

5. 您将显示设置回“隐藏”并将不透明度和位置设置回其原始值。

现在你有了隐藏元素的大小。