javascript 中不可见物体变得可见时的高度
我有一个表示选项卡结构的表格。
某些单元格设置为显示：无； 并且仅显示活动选项卡。 我想为它们设置最大高度。 为此，我遍历选项卡数组并执行以下操作。
// get the max-tab-height
for (var i = 0; i < TabPageList.length; i++)
{
// get max height
if (TabPageList[i].offsetHeight>MaxTabHeight)
MaxTabHeight = TabPageList[i].offsetHeight;
}
这种方法的问题是 offsetHeight 仅适用于显示的活动选项卡。 那么，那些没有展示的高度是多少，什么时候会展示呢？
I have a table that represents Tab-structure.
Some cells are set to display: none; and only the active tab is displayed.
I want to set the max-height to all of them.
To do it, I go through the array of tabs and do the following
// get the max-tab-height
for (var i = 0; i < TabPageList.length; i++)
{
// get max height
if (TabPageList[i].offsetHeight>MaxTabHeight)
MaxTabHeight = TabPageList[i].offsetHeight;
}
The problem with this approach is that offsetHeight is working only for the active tab that is displayed.
So, what's the Height of the ones that are not shown, when they will be shown?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
由于非活动选项卡设置为
display:none，因此 offsetHeight 没有用处。 在选项卡可见后，尝试在激活选项卡的同时运行 MaxTabHeight 例程。 我假设这是在选项卡的单击事件内。Because the inactive tabs are set to
display:none, the offsetHeight is not useful. Try running your MaxTabHeight routine at the same time that you activate the tab, after it is made visible. I'm assuming that's inside the tab's click event.尝试使用可见性：隐藏（不显示：无）。 我记得，使用可见性元素只是隐藏但保留其尺寸。
Try using visibility:hidden (not display:none). As I recall, using visibility elements are just hidden but keep their dimensions.
为了可用性，不应使用 CSS 将选项卡设置为隐藏。 （仍然有一小部分禁用了 js）。 如果您浏览选项卡，读取它们的高度，同时隐藏它们，您可以轻松找到最高的选项卡。 同时使您的网站更加用户友好（：
如果您不希望隐藏单元格折叠，您也可以使用
visibility:hidden;如上所述。For usability, the tabs shouldn't be set to hidden with CSS. (There are still the small percentage out there that has js disabled). If you run through the tabs, reading their height, while hiding them, you can easily find the tallest tab. And at the same time make your site more user-friendly (:
And if you don't want the hidden cells to collapse, you could also use
visibility:hidden;like stated above.正如其他人所说，您可以通过将可见性设置为隐藏来获得高度（这使得对象在隐藏时保持其尺寸）：
使用将其位置设置为绝对的附加技巧，以避免它占用页面上的空间（您可以这样做这只是为了到达高度所需的时间，然后恢复其位置属性）。
第二种方法可能是保持选项卡可见，但通过将其绝对位置设置为一些足够大的坐标将其移出页面。
As the others have said you may get the height by setting the visibility to hidden (which makes the object keep its dimensions while hidden):
with the additional trick of setting its position to absolute to avoid it taking space on the page (you may do this just for the time needed to get at the height, restoring its position attribute afterward).
A second approach may be to keep the tab visible but move it off the page by setting its absolute position to some sufficiently large coordinates.