如何使用vanilla JS減去元素的高度？

Question

我正在嘗試創建一個切換以隱藏/顯示內部頁腳。 我需要計算這個元素的高度然后減去它

主要是根據瀏覽器的寬度來適應不斷變化的高度

我當前的代碼片段非常錯誤，但我希望有人能幫助我更好地學習 JS

 var footerheight = document.querySelector(".footer").offsetHeight; var innerheight = document.querySelector(".inner").offsetHeight; var sitefooter = document.querySelector(".footer"); var toggle = document.querySelector(".toggle"); toggle.addEventListener('click', function() { sitefooter.style.bottom = (footerheight - innerheight); });

 footer { position: fixed; bottom:0; left: 0; width: 100%; background: red; } footer div:first-of-type { padding: 15px 50px; border-bottom: 2px solid #000; } .inner { padding: 50px; }

 <footer class="footer"> <div> <button class="toggle">Footer toggle</button> </div> <div class="inner"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </footer>

Answer 1

一種方法是通過dataset將元素的高度存儲到元素本身上。 然后每當我們更新高度時，我們總是可以恢復到我們保存的高度。 為了使它成為一個流暢的動畫，你可以添加一個CSS 過渡。

 // Get all elements const sitefooter = document.querySelector(".footer"); const inner = document.querySelector(".inner"); const toggle = document.querySelector(".toggle"); // Function to set a height to an element const setElementHeight = (element, amount, unit = "px") => element.style.height = amount + unit; // Save default heights onto elements sitefooter.dataset.height = sitefooter.offsetHeight; inner.dataset.height = inner.offsetHeight; // Set default height for a smooth animation from the start // Without this line the first toggle doesn't have an animation since you can't animate from height auto to a fixed value. setElementHeight(sitefooter, sitefooter.offsetHeight); // Add click event to toggle button toggle.addEventListener("click", () => { // If the footer expanded, collapse it otherwise extend it sitefooter.offsetHeight == sitefooter.dataset.height ? setElementHeight(sitefooter, sitefooter.dataset.height - inner.dataset.height) : setElementHeight(sitefooter, sitefooter.dataset.height); });

 footer { position: fixed; bottom:0; left: 0; width: 100%; background: red; /* For an animation effect */ transition: height 0.25s ease-in-out; } footer div:first-of-type { padding: 15px 50px; border-bottom: 2px solid #000; } .inner { padding: 50px; }

 <footer class="footer"> <div> <button class="toggle">Footer toggle</button> </div> <div class="inner"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </footer>