用 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() {&nbsp; &nbsp; if ( document.querySelector(".linkrec").getAttribute("Id") == undefined ) {&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector(".linkrec").setAttribute("Id", "flipped");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector(".linkrec").removeAttribute("Id", "flipped")&nbsp; &nbsp; }}编辑：为什么element.style行不通？来自MDN 网络文档：该style属性用于获取和设置元素的内联样式。因此，该style属性不适用于嵌入式或外部 CSS。此外，使用硬编码颜色作为条件可能不是一个好主意，因为在相应的 CSS 类中更改颜色会完全破坏功能。