CODEWITHSUNDEEP
javascript
Paffly
Paffly

Reputation: 55

How can I set CSS styles in JavaScript?

I have the following JavaScript code:

const cardWrapper = document.querySelectorAll('.card__wrapper');

cardWrapper.forEach((cont) => {
    const cards = cont.querySelectorAll('.card');
    const cardBg = cont.querySelectorAll('.card-bg');
    const cardText = cont.querySelectorAll('.card__text');
    
    cardBg.style.transition = 'all .3s ease-out';
    cardText.style.transition = 'all .3s ease-out';
  
    cards.forEach((el, i) => {
        el.addEventListener('mouseenter', () => {
            cardBg[i].style.maxHeight = '100%';
            cardText[i].style.maxHeight = '100%';
        });

        el.addEventListener('mouseleave', () => {
            cardBg[i].style.maxHeight = '56px';
            cardText[i].style.maxHeight = '56px';
        });
    });
});

I need to take these 2 styles out of events and leave them in the JS code, not put them in the CSS file.

cardBg.style.transition = 'all .3s ease-out';
cardText.style.transition = 'all .3s ease-out';

The way I did in the code above doesn't work. What's wrong with it?

Upvotes: 0

Views: 59

Answers (1)

user14028806
user14028806

Reputation:

It's because your cardBg and cardText are arrays. You need to loop over them like you did for cards if you want to change their CSS style. Or if you sure you only have one element you can do the following:

cardBg[0].style.transition = 'all .3s ease-out';
cardText[0].style.transition = 'all .3s ease-out';

Upvotes: 2

Related Questions