Comment empêcher le code Javascript de convertir automatiquement HSL en RVB

Question

J'ai ce code dans lequel j'attribue une couleur à un objet, puis j'utilise une condition pour vérifier si l'élément a été sélectionné. Cependant, la condition ne fonctionne pas car javascript (ou le navigateur) convertit HSL en RVB, ce qui empêche toute correspondance. Je me demande s'il existe un moyen d'empêcher ce comportement dans JS (ou les navigateurs), et sinon, pourquoi cela se produit-il ?

function selecionarNota() {

    if (this.style.backgroundColor == 'hsl(25, 97%, 53%)') { 
        for (let i = 0; i < numAvaliacao.length; i++) {
            numAvaliacao[i].style.backgroundColor = 'hsl(213, 19%, 21%)';
            numAvaliacao[i].style.color = 'hsl(217, 12%, 63%)';
        }

    } else {

        for (let i = 0; i < numAvaliacao.length; i++) {
            numAvaliacao[i].style.backgroundColor = 'hsl(213, 19%, 21%)';
            numAvaliacao[i].style.color = 'hsl(217, 12%, 63%)';
        }

        this.style.backgroundColor = 'hsl(25, 97%, 53%)';
        this.style.color = 'white';

    }
}

J'ai réalisé que je pouvais résoudre ce problème en utilisant RVB dans mon code. Mais j'aimerais vraiment comprendre pourquoi cela se produit.

Answer 1

Cela se produit car il s’agit d’un standard de navigateur.

Je recommande de créer des classes CSS avec ces couleurs et d'appliquer ces classes en javascript. Ensuite, vous pouvez utiliser element.classList.contains(class) dans l'état.