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 transition。

// 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>

如何使用香草JS减去元素的高度？

1 个答案: