时间戳

首页 > 解决方案 > 在文档准备好的非活动选项卡内获取元素的高度？

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>

我想在加载文档后立即获取 TAB2 文本的高度。

$('document').ready(function(){
 console.log($(p).css('height')); 
});

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

有没有办法做到这一点？

标签： javascripthtmljquery

解决方案

您可以这样做，但您有showORp 其他想要height在 DOM 中获取的元素 - 显示为仅显示获取高度然后再次隐藏。你甚至不会注意到showand hide。

由于该height方法仅适用于您或其他页面works上的元素被隐藏availablepdivsdefault

我用的是纯JavaScript的，jQuery无论如何。您可以forEach先循环遍历所有元素并添加 show 类，然后在我们获取height.

要获得实际的height / widthORx/y等，您可以使用这个函数getBoundingClientRect，它将返回您想要的所有内容。

现场工作演示：

window.addEventListener('DOMContentLoaded', (event) => {
  let rect = document.querySelectorAll('p')
  rect.forEach(function(x) {
    x.parentElement.classList.add('show', 'active') //add active class
    let elem = document.querySelector('p').getBoundingClientRect() //get all the `p` height
    console.log(elem.height) //get height 24
    console.log(elem) //the whole object i.e height / width` OR `x/y`
  })
  rect.forEach(function(x) {
    x.parentElement.classList.remove('show', 'active') //remove active class
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<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>

推荐阅读