JavaScript if语句else不生效 透明度opacity切换失效问题

代码存在两个核心问题，导致else分支始终无法触发：

• 条件判断误用赋值运算符：if (item.style.opacity = "1")里的=是赋值操作，不是相等比较。每次点击时这行代码会先把元素的行内opacity强制设为"1"，赋值表达式返回值永远为"1"（真值），因此if判断永远成立，else逻辑永远不会执行。
• 样式读取逻辑错误：item.styleAPI只能读取元素写在标签style属性里的行内样式，初始的opacity: 1是写在CSS样式表中的，首次点击时读取item.style.opacity只能拿到空字符串，就算修正了比较运算符，初始判断逻辑也会出错。

方案1：修正判断逻辑+读取实际生效样式 #

直接修复原有逻辑的问题，通过getComputedStyle读取元素最终渲染生效的opacity值，同时把赋值运算符替换为相等比较运算符：

let container = document.getElementById("container").children;
let contArr = [...container];

contArr.forEach( item => {
    item.addEventListener("click", function handleClick() {
        // 获取元素实际渲染的opacity值
        const currentOpacity = window.getComputedStyle(item).opacity;
        if (currentOpacity === "1") {
            item.style.opacity = "0.5";
        } else {
            item.style.opacity = "1";
        }
    })
});

方案2：CSS类切换（更推荐） #

不需要手动判断样式值，通过切换CSS类实现透明度切换，逻辑更简洁易维护：
首先在CSS中新增半透明类（选择器权重和原有img样式保持一致，无需加!important）：

.container img.half-opacity {
    opacity: 0.5;
}

然后简化点击事件逻辑，点击时直接切换类名即可：

let container = document.getElementById("container").children;
let contArr = [...container];

contArr.forEach( item => {
    item.addEventListener("click", () => {
        item.classList.toggle("half-opacity");
    })
});

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