0

I would like to know if it's possible to get the height of many element with 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>

I would like to to have a translate on the .card__img of the height of .card__description on a 'mouseover', is it possible to get the offsetHeight using querySelectorAll('.card__description).offsetHeight and using a loop? I tried but didin't work.

Damien
  • 1
  • 2
  • `querySelectorAll` returns a `NodeList` .... NodeLists do not have a property called offsetHeight - you loop the NodeList, and access the offset height of each element in the NodeList individually – Jaromanda X Dec 21 '20 at 22:51
  • You have to loop over all the elements and get the height of each. – Barmar Dec 21 '20 at 22:52
  • Thank you guys! I did it and posted the answer, maybe there is an other way to do it? – Damien Dec 22 '20 at 17:26

1 Answers1

0

Thanks guys, I did it!

Here is my solution

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()
Damien
  • 1
  • 2