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

【问题标题】：Is it possible to use querySelectorAll with offsetHeight?是否可以将 querySelectorAll 与 offsetHeight 一起使用？
【发布时间】：2021-03-31 16:47:38
【问题描述】：

我想知道是否可以使用 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？我试过了，但没用。

【问题讨论】：

querySelectorAll 返回 NodeList .... NodeLists 没有称为 offsetHeight 的属性 - 您循环 NodeList，并分别访问 NodeList 中每个元素的偏移高度
您必须遍历所有元素并获取每个元素的高度。
谢谢你们！我做到了并发布了答案，也许还有其他方法可以做到？

标签： javascript height offsetheight

【解决方案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()

【讨论】：