javascript - 是否可以将 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>

我想在“鼠标悬停”上对 .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()