javascript - 如何获得动态高度

Question

我想制作一个元素动画，为此我需要获取前一个元素的高度 [.as-body-wrap] 并在样式中将其用作顶部的缩进[.as-toaster.is_open]

下面的元素

这是我的 HTML 和 jQuery:

jQuery(document).ready(function() {
  const cta = document.querySelector('.as_header');
  const footer = document.querySelector('.as-toaster');
  const expandIcon = document.querySelector('.expand_icon');
  const asheight = document.querySelector('.as-body-wrap').offsetHeight;

  function toggleFooter() {
    footer.classList.toggle('is_open');
    expandIcon.classList.toggle('is_reversed')
  }

  cta.addEventListener('click', toggleFooter);

  // onclick action not the best implementation
  $(cta).toggle(
    function() {
      $('.as-toaster.is_open').css('margin-top', -asheight);
    },
    function() {
      $('.as-toaster').css('margin-top', '');
    }
  );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">

  <div class="as-body-wrap">
    <h3 class="as-title">Hi! I am Andrey</h3>
    <p class="as-sub-title">fashion designer</p>
    <div class="as-description">
      <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
    </div>
  </div>

  <div class="as-toaster">
    <div class="as-wrapper">
      <header class="as_header">
        <div class="as-contact">Contact Me</div>
        <div class="as-contact-info">Please send me an email by filling out the form below.</div>
        <svg class="expand_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
				<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>
				<path d="M0 0h24v24H0z" fill="none"></path>
			</svg>
      </header>
    </div>
  </div>

</div>

接下来是为 .as-toaster.is_open 添加样式 margin-top: -.as-body-wrap height

看起来像这条线，

$('.as-toaster.is_open').css('margin-top', - asheight);

但是如何动态地获得这个高度，以防在横向模式下查看时这个高度可以改变

Answer 1

如果我理解正确，您只需要一种方法在运行动画之前获取 .as-body-wrap div 的高度。

这可以使用 jQuery 的 height function 来完成:

$(".as-body-wrap").height();

这将返回所选元素的当前计算高度。

jQuery(document).ready(function() {
  const cta = document.querySelector('.as_header');
  const footer = document.querySelector('.as-toaster');
  const expandIcon = document.querySelector('.expand_icon');
  let asBody = $(".as-body-wrap");
  let asheight = 0;

  function setASBodyHeight() {
    asheight = asBody.height();
    console.log(`Set asheight to ${asheight}`);
  }

  function toggleFooter() {
    footer.classList.toggle('is_open');
    expandIcon.classList.toggle('is_reversed')
  }

  cta.addEventListener('click', toggleFooter);

  setASBodyHeight();
  $(window).resize(setASBodyHeight);

  // onclick action not the best implementation
  $(cta).toggle(
    function() {
      let asheight = $('.as-body-wrap').height();
      $('.as-toaster.is_open').css('margin-top', -asheight);
    },
    function() {
      $('.as-toaster').css('margin-top', '');
    }
  );

});