успешно перевернуть переход с js, но почему мой другой способ не работает?

Question

• моя демонстрация jsfiddle
• Мне нужен обратный переход , когда я снова нажимаю
• , но комментированный код не работал, и приведенный ниже код работает нормально

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

• ниже приведен комментарий с комментариями (я думаю, когда я впервые нажимаю последний
• , 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 Web Docs :

Свойство style используется для получения, а также для установки inline стиль элемента.

Следовательно, свойство style не будет работать со встроенным или внешним CSS.

Кроме того, может быть плохой идеей использовать жестко закодированные цвета в качестве условия, поскольку изменение цветов в соответствующих классах CSS полностью нарушит функциональность.