如何在addEventListener中设置opacity样式及对应报错解决

• document.getElementsByClassName() 方法返回的是动态HTMLCollection类数组集合，即便页面中该类名只有1个匹配元素，返回结果也是包裹该元素的集合，集合本身不存在style属性，直接访问mainDiv.style会得到undefined，对其赋值opacity属性就会触发你遇到的类型错误。

场景1：对应类名仅存在1个需要修改的元素 #

直接取集合的第一个元素即可，你可以选择两种修改方式：

方式1：取集合索引0的元素 #

// 变量赋值时追加[0]取第一个匹配元素
const mainDiv = document.getElementsByClassName('home-bg-image')[0];
const homeMainDiv = document.getElementsByClassName('home-bg')[0];
const homeDiv = document.getElementById('home-1');

homeDiv.addEventListener('mouseenter', e => {
    mainDiv.style.opacity = '0';
    homeMainDiv.style.opacity = '1';
    console.log('Working !!!')
});

方式2：替换为querySelector方法获取单个元素 #

document.querySelector()会直接返回第一个匹配的DOM元素，不需要额外取索引：

const mainDiv = document.querySelector('.home-bg-image');
const homeMainDiv = document.querySelector('.home-bg');
const homeDiv = document.getElementById('home-1');

homeDiv.addEventListener('mouseenter', e => {
    mainDiv.style.opacity = '0';
    homeMainDiv.style.opacity = '1';
    console.log('Working !!!')
});

场景2：对应类名的所有元素都需要修改样式 #

遍历整个集合逐个设置属性即可：

const mainDivList = document.getElementsByClassName('home-bg-image');
const homeMainDivList = document.getElementsByClassName('home-bg');
const homeDiv = document.getElementById('home-1');

homeDiv.addEventListener('mouseenter', e => {
    // 遍历所有匹配的home-bg-image元素
    for (const el of mainDivList) {
        el.style.opacity = '0';
    }
    // 遍历所有匹配的home-bg元素
    for (const el of homeMainDivList) {
        el.style.opacity = '1';
    }
    console.log('Working !!!')
});

内容的提问来源于stack exchange，提问作者Ahsan Shaikh