CODEWITHSUNDEEP
javascript
xRay
xRay

Reputation: 801

How to get the height of an element without its CSS?

My element has a CSS class that defines what the height of it should be.

.very-long-container {
  height: 50px;
}
<div class="very-long-container">...</div>

I want to know the original height of that element, so not what is defined with CSS.

Well, my way of getting the height is to reset the CSS first, get the original height and then set the height with CSS again. Like this:

document.querySelector('.very-long-container').style.height = 'inherit';
console.log(document.querySelector('.very-long-container').offsetHeight);
document.querySelector('.very-long-container').style.height = '50px';

Since this is not the best practice, I am sure that there are better answers.

Upvotes: 1

Views: 228

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20944

The container is 50px and will always be that if you tell it. When you remove the 50px from the CSS it will take the height of the children inside of it.

So one way of know what the actual height would be whenever there is no fixed height set is to either have another container inside of the container or to sum the height of all children inside of the container.

The former is the easiest to work out. If a child container does not have a fixed height, it will automatically take the height of the children inside of it, despite the outer container having a fixed height.

The example below uses the aforementioned technique. Reading the offsetHeight of the inner container. As a bonus it uses a ResizeObserver to update the height whenever the size of the inner container changes.

const innerContainer = document.querySelector('.inner-container');
let height = innerContainer.offsetHeight;

const resizeObserver = new ResizeObserver(entries => {
  for (const { target } of entries) {
    height = target.offsetHeight;
    console.log(height);
  }
});

resizeObserver.observe(innerContainer);
.very-long-container {
  height: 50px;
  overflow: hidden;
}
<div class="very-long-container">
  <div class="inner-container">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue efficitur purus vel posuere. Nam eget tincidunt dolor, eu tempor neque. Aliquam ac ex urna. Ut scelerisque urna purus, tincidunt bibendum massa accumsan id. Mauris vitae cursus mi.
      Phasellus imperdiet vel metus et ornare. Donec nulla justo, convallis sed lacus at, dapibus rhoncus neque. Cras velit erat, lacinia eu lectus lobortis, rhoncus congue ex. Curabitur lacus diam, dignissim at tortor ac, suscipit venenatis tortor. Fusce
      tempus consectetur dui, vel placerat purus luctus nec. Morbi elementum, mi lacinia rhoncus vehicula, dolor dolor iaculis augue, id feugiat arcu tortor sed lectus. Quisque lacus justo, luctus sit amet finibus quis, pretium sed ex.
    </p>
    <p>
      Morbi luctus neque non nunc placerat varius. Sed cursus scelerisque mi id interdum. Sed sodales orci ut laoreet imperdiet. Duis pretium erat ut libero consectetur ultrices. Aenean suscipit ultricies diam at pretium. Fusce pharetra lectus at lectus ornare,
      sit amet lobortis libero lacinia. Quisque odio orci, ornare sed molestie non, fermentum at enim. Nam ut tortor enim. Nulla facilisi. Maecenas vehicula vitae felis ut mollis. Nam varius elementum felis, condimentum hendrerit velit elementum eu. Praesent
      laoreet, turpis vel condimentum auctor, nisi erat viverra purus, sed gravida odio nulla nec urna.
    </p>
    <p>
      Morbi sed enim ligula. Fusce vitae feugiat nunc. Sed vel velit orci. Nunc ut euismod ipsum. Cras sed velit nec lectus scelerisque sagittis. Fusce non nunc leo. Donec viverra eu felis sed molestie. Proin ut molestie libero, ut ultricies purus. Nullam dapibus
      felis non vestibulum aliquam. Mauris quam mi, dictum eu nisi vitae, malesuada ultricies turpis. Donec vitae dolor leo. Nulla at dui eget eros molestie congue. Etiam imperdiet lobortis feugiat.
    </p>
    <p>
      Maecenas enim magna, convallis vitae scelerisque at, lobortis vitae elit. Cras interdum ipsum non purus feugiat rhoncus. Fusce eu elit porttitor, aliquet libero at, dapibus massa. Suspendisse dignissim varius mauris, sed ullamcorper mauris interdum quis.
      Proin viverra purus massa, in finibus magna faucibus ut. Nulla malesuada ipsum vel maximus vestibulum. Vestibulum molestie in dui fringilla interdum. Donec dignissim sapien nisl. Suspendisse aliquam elit turpis, at euismod mauris consectetur vel.
    </p>
    <p>
      Suspendisse fermentum urna a arcu dignissim tincidunt. Nulla pellentesque orci vitae vulputate rutrum. Vestibulum interdum faucibus lectus vel vehicula. Suspendisse egestas dolor sit amet justo vehicula sodales. Integer fringilla eget erat id rhoncus.
      Aenean luctus purus ut libero volutpat, viverra lobortis dui maximus. Integer sit amet aliquet nulla. In suscipit id orci sed tincidunt. Suspendisse pharetra suscipit tempus. Cras mattis a nibh eu porttitor. Donec nec iaculis metus. Pellentesque
      molestie diam eu eleifend cursus. Suspendisse tincidunt, lorem quis pulvinar viverra, metus felis imperdiet nisi, ut dignissim velit urna nec odio. Quisque pulvinar turpis non ipsum mattis, a iaculis ipsum pellentesque. Vestibulum finibus sed sapien
      quis faucibus. Vivamus tristique, neque id finibus ultrices, sapien elit consequat odio, placerat commodo magna odio id velit.
    </p>
  </div>
</div>

Upvotes: 1

Related Questions