用js成功扭转了过渡，但为什么我的另一种方式不起作用？

Question

• 我的演示jsfiddle
• 我想要的是当我再次单击 <li> 时的反向过渡，但注释代码不起作用，下面的代码工作正常

let dbclickre = true;
function flipped() {
    if (dbclickre) {
        document.querySelector(".linkrec").setAttribute("Id", "flipped");
    } else {
        document.querySelector(".linkrec").removeAttribute("Id", "flipped")
    }
    dbclickre = !dbclickre;
}

• 下面是注释代码（我认为当我第一次单击最后一个 <li> 时，js 将执行 if 语句（确实它工作正常），但是当我再次单击时，else 语句没有排除（但我已经设置#flipped.reverse {背景：whitesmoke}）。为什么会这样？？？）

// const dbclickre = document.querySelector(".reverse");
// function flipped() {
//     if (dbclickre.style.backgroundColor = 'white') {
//         document.querySelector(".linkrec").setAttribute("Id", "flipped");
//     } else {
//         document.querySelector(".linkrec").removeAttribute("Id", "flipped")
//     }
// }

Answer 1

您可以检查是否存在Id属性，而不是依赖背景颜色来检查翻转的 state。 这里是更改后的代码：

const dbclickre = document.querySelector(".reverse");
function flipped() {
    if ( document.querySelector(".linkrec").getAttribute("Id") == undefined ) {
        document.querySelector(".linkrec").setAttribute("Id", "flipped");
    } else {
        document.querySelector(".linkrec").removeAttribute("Id", "flipped")
    }
}

编辑：

为什么element.style不起作用？

来自MDN Web 文档：

style属性用于获取和设置元素的内联样式。

因此， style属性不适用于嵌入式或外部 CSS。

此外，使用硬编码的 colors 作为条件可能不是一个好主意，因为在相应的 CSS 类中更改 colors 会完全破坏功能。