Fetch height of an element inside a not-active tab on document ready?

Question

I have a tabs navbar as follows-


  
    Home
  
  
    Profile
  
  
    Contact
  


  TAB1
  TAB2

  TAB3

I want to fetch the height of the TAB2 text as soon as I load the document.

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

This returns me 0px. However, if I try to fetch it from a button within the tab, it gives the result as the text is already rendered by then.

Is there a way to achieve this?

user_13669048 · Answer

You can do this but you have show the p OR other elements you want to get height of in DOM - show as in only to show get the height and then hide again. You will not even notice about show and hide.

Since the height method only works on elements that are available on the page your p or other divs are hidden by default

I have using pure JavaScript which is jQuery anyways. You can use forEach to loop through all the elements first and add show class and then remove class once we have fetched the height.

To get the actual height / width OR x/y etc etc you can this one function getBoundingClientRect which will return everything you want.

Live Working Demo:

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





  
    Home
  
  
    Profile
  
  
    Contact
  


  TAB1
  
    TAB2
  
  
    TAB3

Fetch height of an element inside a not-active tab on document ready?

1 Answers