用 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 {background: 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您可以检查属性是否存在，而不是依赖背景颜色来检查翻转状态。这里是更改后的代码：

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 网络文档：

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

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

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