Javascript 获取文档准备就绪时非活动选项卡内元素的高度？

我有一个选项卡导航栏，如下所示-

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">TAB1</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"><p>TAB2<p></div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">TAB3</div>
</div>

这使我返回0px。但是，如果我尝试从选项卡中的按钮获取它，它会给出结果，因为此时文本已经呈现

---

有什么方法可以实现这一点吗？

您可以这样做，但您必须

显示
p
或
其他您想要在DOM中获得的元素
高度
-仅显示以获得高度，然后再次隐藏。您甚至不会注意到
show
和
hide

由于
height
方法只对页面上可用的
元素起作用，因此
p
或其他
div
被
默认值隐藏

我已经使用了纯
JavaScript
，不管怎样，这就是
jQuery
。您可以使用
forEach
首先循环遍历所有元素，添加show类，然后在获取
高度后删除类

要获得实际的
高度/宽度
或
x/y
等，您可以使用此函数返回所需的一切

现场工作演示：


window.addEventListener（'DOMContentLoaded'，（事件）=>{
让rect=document.querySelectorAll（'p'））
矩形forEach（函数（x）{
x、 parentElement.classList.add（'show'，'active'）//添加活动类
让elem=document.querySelector（'p'）。getBoundingClientRect（）//获取所有的'p'高度
console.log（elem.height）//获取高度24
console.log（elem）//整个对象，即高度/宽度`或`x/y`
})
矩形forEach（函数（x）{
x、 parentElement.classList.remove（'show'，'active'）//删除活动类
})
});









表1
表2

表3
$（'p'）.parent（）.innerHeight（）
？
p
的高度将与其
div#myTabContent
相同-正确吗？我猜
p
在第二个选项卡中是
TAB2
。“我想获取TAB2文本的高度”@AlwaysHelping，是的。不过，这只是一个样本。若我有更多的元素，并且我想得到某个特定元素的高度，那个么我如何获取它呢？我可以获取CSS中已经设置的任何其他样式，但不能获取高度、宽度等。关于渲染周期的一些信息可能…idk。有什么解决办法吗？@AbbasEbadian我只想要的高度，而不是整个div。在真实场景中，我在页面上有更多的元素。谢谢你！这是一个非常巧妙的解决方案！我试着用一个三行的桌子，分别有55px，45px，45px的高度。当我加载页面时，它会给出正确的结果。然后我刷新3-4次，这些值会因某种原因而更改。我再次刷新，得到正确的结果。我了解到窗口事件监听器不是很一致，可能会因浏览器而异。我说得对吗？然而，这是一个很好的解决方案。谢谢@ItykaBandta没问题，很乐意帮助：）你可以使用
document.ready函数
以及
window.DOMContentLoaded
这与
DOMContentLoaded
l是一样的，并且这个
DOMContentLoaded
l都在浏览器上工作-对于页面刷新结果的变化，它实际上取决于加载的内容是如何准备好让JS下载的给你结果-如果它是通过ajax或类似的东西加载的。但是您应该根据CSS中设置的规格获得正确的值。是的。我也试过了。尽管仍然在正确和错误的值之间切换！：D但是这个解决方案对我有效我仍然想知道“height方法只适用于页面上可用的元素”——如果它可以获取其他属性，这意味着DOM元素可用。（但尚未呈现，对吗？）我对时间顺序有点不清楚。@ItykaBandta是的，这是正确的，因为高度可以根据页面大小动态变化，除非您正在查找的某些元素将其设置为静态。因此，是的，它将只显示在
rect
中，元素变为可见或显示在页面上。
$('document').ready(function(){
 console.log($(p).css('height')); 
});