我想在 style.display='none;'
时获取 DIV 元素(用于在光标位置显示弹出菜单)的尺寸,但是 DIV 的尺寸总是返回 0。我似乎能够获得尺寸的唯一方法是使 DIV style.display='block;'
位于 0,0,然后将其移动到所需位置,但是看起来很紧张。
我试过使 DIV 在可见屏幕区域之外可见,但这不起作用。有没有办法在隐藏 DIV 的同时获取 clientWidth
和 clientHeight
值?
最佳答案
如果您的 DIV 不可见,您将无法获得它的尺寸。
但是,有一个解决方法。您的 div 必须“可见”,但这并不意味着它的不透明度和位置必须为 1 且相对。
将不透明度设置为 0,将位置设置为“绝对”,您将能够获得 DIV 尺寸。
编辑
因为我认为会有更多人遇到类似问题,所以我觉得我应该多解释一下我的答案。
如果您尝试使用 JavaScript 获取隐藏元素的大小,您将始终获得 0。
所以有一些技术可以在不向用户显示元素的情况下获得实际大小。我最喜欢的是我上面已经写过的那个。以下是更详细的步骤:
您将元素的不透明度设置为 0。这样,当您获取尺寸时,它不会显示给最终用户。
您将元素位置设置为“绝对”。这样它就不会占用任何空间。
现在可以安全地将显示设置为“inline-block”。
您阅读了元素尺寸。这次您将获得真正的值(value)。
您将显示设置回“隐藏”并将不透明度和位置设置回其原始值。
现在你有了隐藏元素的大小。
关于javascript - 如何在DIV可见前获取clientWidth & clientHeight,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30637577/