是否可以将querySelectorAll与offsetHeight一起使用

Question

我想知道是否可以用offsetHeight 获得许多元素的高度

<div class="container">
<div class="card">
<h4 class="card__title">My Title</h4>
<div class="card__img">
<img src="image.jpg" alt="">
</div>
<div class="card__description">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>
</div>
</div>
<div class="card">
<h4 class="card__title">Thailande</h4>
<div class="card__img">
<img src="image.jpg" alt="">
</div>
<div class="card__description">
<p>
Description 2
</p>
</div>
</div>
</div>

我想在"mouseover"上对.card__description高度的.card__img进行翻译，是否可以使用querySelectorAll('.card__description(.offsetHeight并使用循环来获取offsetHeight？我试过了，但没有成功。

Answer 1

谢谢大家，我做到了！

这是我的解决方案

const cards = document.querySelectorAll('.card')
function cardAnimation () {
for (let i = 0; i < cards.length; i++) { 
let card = cards[i]
let cardImg = card.querySelector('.card__img')
let description = card.querySelector('.card__description')
let descriptionHeight =  description.offsetHeight
card.addEventListener('mouseover', () => {      
description.style.transform = `translateY(0)`;
cardImg.style.transform = `translateY(-${descriptionHeight}px) scale(1.2)`
})
card.addEventListener('mouseleave', () => {
description.style.transform = `translateY(100%)`;
cardImg.style.transform = `translateY(0px) scale(1)`
})
}
}
cardAnimation()