Выборка высоты элемента внутри неактивной вкладки в document ready?

ProgramBox

Выборка высоты элемента внутри неактивной вкладки в document ready?

Post author:admin
Запись опубликована:21 марта, 2023
Post category:Вопросы по программированию

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть панель навигации tabs следующим образом-

 <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')); 
});

Это возвращает мне 0 пикселей. Однако, если я попытаюсь извлечь его с помощью кнопки на вкладке, это даст результат, поскольку к тому времени текст уже будет отрисован.

Есть ли способ добиться этого?

1. $('p').parent().innerHeight() ?

2. p высота будет такой же, как и ее div#myTabContent правильная?

3. Я думаю p , это <p>TAB2<p> на второй вкладке. «Я хочу получить высоту текста TAB2»

4. @AlwaysHelping , да. Однако это всего лишь пример. Если у меня больше элементов, и я хочу получить высоту какого-то конкретного элемента, то как я могу его получить? Я могу получить любой другой стиль, который уже был установлен в CSS, но не высоту, ширину и т.д. Возможно, что-то о цикле рендеринга … idk. Есть решение?

5. @AbbasEbadian Мне просто нужна высота <p>, а не всего div. В реальном сценарии у меня больше элементов на странице.

Ответ №1:

Вы можете это сделать, но у вас есть show p ИЛИ другие элементы, которые вы хотите получить height в DOM — показать, как только показать, получить высоту, а затем снова скрыть. Вы даже не заметите об show и hide .

Поскольку height метод только works для элементов, которые находятся available на странице, ваши p или другие divs скрыты default

Я использую чистый JavaScript , который jQuery в любом случае. Вы можете использовать forEach , чтобы сначала перебрать все элементы и добавить показать класс, а затем удалить класс, как только мы получим height .

Чтобы получить фактическое height / width ИЛИ x/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>

1. огромное спасибо , приятель ! Это такое изящное решение ! Я попробовал это с таблицей с тремя строками, которые имеют высоту 55 пикселей, 45 пикселей, 45 пикселей соответственно. Когда я загружаю страницу, это дает правильный результат. Затем я обновляю 3-4 раза, и значения по какой-то причине меняются. Опять же, я обновляю и получаю правильный результат. Я читал, что прослушиватели событий window не очень последовательны и могут варьироваться в зависимости от браузеров. Я прав? Тем не менее, это отличное решение. Спасибо!

2. @ItykaBandta Нет проблем, рад помочь 🙂 Вы также можете использовать document.ready function то же самое, window.DOMContentLoaded что и, и это DOMContentLoaded l работает во всех браузерах, вот совместимость — для изменения результатов при обновлении страницы это на самом деле зависит от того, как загружается содержимое готов, готов ли JS выдавать вам результаты — если он загружен через ajax или что-то в этом роде. Но вы должны получить правильные значения в соответствии со спецификациями, установленными в CSS.

3. ДА. Я тоже пробовал с этим. Хотя все еще переключается между правильными и неправильными значениями! : D Но это решение будет работать для меня! и я все еще задаюсь вопросом о «методе высоты работает только с элементами, которые доступны на странице» — если он может извлекать другие свойства, это означает, что элементы DOM доступны. (но еще не отображено, правильно?) Я немного не понимаю хронологию.

4. @ItykaBandta Да, это правильно, поскольку высота может меняться в зависимости от размера страницы, если для некоторых элементов, которые вы ищете, не установлено значение static. Так что да, это будет показано только в rect одном элементе, который станет видимым или будет показан на странице.