如何在沒有 CSS 的情況下獲取元素的高度？

Question

我的元素有一個 CSS class 定義了它的高度。

 .very-long-container { height: 50px; }

 <div class="very-long-container">...</div>

我想知道該元素的原始高度，而不是 CSS 定義的高度。

好吧，我獲取高度的方法是先重置 CSS，獲取原始高度，然后再次使用 CSS 設置高度。 像這樣：

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

由於這不是最佳實踐，我相信會有更好的答案。

Answer 1

容器是50px ，如果你告訴它，它將永遠是這樣。 當您從 CSS 中刪除50px時，它將占用其中孩子的高度。

因此，當沒有設置固定高度時，了解實際高度的一種方法是在容器內放置另一個容器，或者將容器內所有子項的高度相加。

前者是最容易解決的。 如果子容器沒有固定的高度，它會自動獲取其中子容器的高度，盡管外部容器具有固定的高度。

下面的示例使用上述技術。 讀取內部容器的offsetHeight 。 作為獎勵，它使用ResizeObserver來在內部容器的大小發生變化時更新高度。

 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>