Question

在将事件侦听器附加到第二个容器中的order-body时，尝试获取FIRST容器的price的计算高度。我现在被困住了。

<div class=“order-body”>
   <div class=“product-details”>
       <div class=“price”>
          $9.99
        </div>
  </div>
</div>

<div class=“order-body”>
   <div class=“product-details”>
       <div class=“price” id = “foo”>
            $5.99
        </div>
  </div>
</div>

<div class=“order-body”>
   <div class=“product-details”>
      <div class=“price”>
         $10.99 
      </div>
  </div>
</div>




let price = document.getElementById(‘foo’);

function increaseContainerHeight() {

    event.target.parentElement.parentElement.style.height = “200px”
    event.target.parentElement.parentElement.style.transition = “all 1s”



    // the height’s value is “” before I set it so transitioning it goes from “” to “200px” , which won’t transition properly since it goes from no value to “200px”

}


price.addEventListener(‘click’, increaseContainerHeight)

上述问题是，它将完成将外部容器增加到200px的工作，但不会过渡，因为它没有从其开始的过渡高度，因此我想获取计算出的高度，然后将其转换为200px：

function increaseContainerHeight() {

// setting the height to the computed height , which is “67px”

   event.target.parentElement.parentElement.style.height = window.getComputedStyle(event.target.parentElement.parentElement).height

// THEN increment the height so it can transition 

   event.target.parentElement.parentElement.style.height = “200px”
  event.target.parentElement.parentElement.style.transition = “all 1s”
}

但是现在所有这些之后，我意识到我正在设置和更改SECOND容器上的order-body容器，该容器包含我的eventListener附加到的元素，但我想将第一个作为目标。我该怎么办？

Answer 1

如果您在CSS中预定义了height，那么您已经有了一个起点。

要获取第一个div，您可以遍历最近的.order-body。

您可以使用.closest('.order-body')或.parentElement.parentElement（如果必须支持IE），然后获取其previousElementSibling。

请参见下面的代码段

let price = document.getElementById('foo');

price.addEventListener('click', increaseContainerHeight)

function increaseContainerHeight(event) {
  var first = event.target.parentElement.parentElement.previousElementSibling
  first.style.height = '200px'

}

.order-body {
  display: inline-block;
  background: #396;
  transition: 1s;
  height: 67px;
}

<div class="order-body">
  <div class="product-details">
    <div class="price">
      $9.99
    </div>
  </div>
</div>

<div class="order-body">
  <div class="product-details">
    <div class="price" id="foo">
      $5.99
    </div>
  </div>
</div>

<div class="order-body">
  <div class="product-details">
    <div class="price">
      $10.99
    </div>
  </div>
</div>

Answer 2

这将获得您说需要从其过渡的初始起始高度：

HTML：

<div class="order-body" style="height: 200px;">
    <div class="product-details">
        <div class=“price”>
            $9.99
        </div>
    </div>
</div>

<div class="order-body" style="height: 100px;">
    <div class="product-details">
        <div class=“price” id = “foo”>
            $5.99
        </div>
    </div>
</div>

<div class="order-body" style="height: 50px;">
    <div class="product-details">
        <div class=“price”>
            $10.99 
        </div>
    </div>
</div>

<script defer src="test.js"></script>

JavaScript：

// order-body array
const h = document.querySelectorAll(".order-body");

for (let i = 0; i < h.length; i++) {
    // https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
    // includes padding
    console.log(h[i].clientHeight);
    // >> 200
    // >> 100
    // >> 50

    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
    // includes padding, scrollBar, borders
    // console.log(h[i].offsetHeight);
}

JS：如何使用parentElement定位特定的父对象

2 个答案: