Zellenhintergrundfarbe in JavaScript vergleichen

Question

Abhängig von der aktuellen Farbe der Tabellenzelle versuche ich, die Farbe zu ändern oder sie gleich zu halten, wenn die Maus die Zelle verlässt. Hier ist mein Skript:

<script> 
    $('.tableCell') 
     .mouseenter(function() { 

      $(this).find(".hideCheckBox").show(); 
     }) 
     .mouseleave(function() { 

      $(this).find(".hideCheckBox").hide(); 
      if ($(this).find(".hideCheckBox").is(":checked")) { 
       $(this).css("backgroundColor", "#10657e"); 
       $(this).css("color", "white"); 
      } 
      else { 
       if ($(this).style.backgroundColor === "#157fa0") { 

       } else { 
        $(this).css("backgroundColor", "white"); 
        $(this).css("color", "black"); 
       } 
      } 
     }); 
</script> 

Allerdings funktioniert mein Vergleich (unten) nicht. Wie kann ich in JavaScript vergleichen, damit das funktioniert?

if ($(this).style.backgroundColor === "#157fa0") { 

Answer 1

Versuchen Sie, die RGB-Werte zu vergleichen:

if ($(this).style.backgroundColor == 'rgb(21, 127, 160)') { 

Answer 2

Problem

Das Problem, das Sie haben, ist, dass verschiedene Browser Farben auf unterschiedliche Weise übermitteln können. Zum Beispiel können Sie eine Farbe auf #ff0000 setzen, aber wenn Sie danach fragen, erhalten Sie zurück rgb(255, 0, 0).

Umgehung

Der sicherste Weg, um eine Hintergrundfarbe zu vergleichen, ist ein temporäres Element mit der Farbe, die Sie vergleichen wollen zu erstellen. Dann rufen Sie die Farbe des temporären Elements ab und vergleichen diese Farbe mit der Farbe des Elements, an dem Sie tatsächlich interessiert sind. Diese Problemumgehung verwenden wir, wenn Unit-Testing-Direktiven in eckigen Farben das Element modifizieren.

Beispiel (mit jQuery)

var getExpectedColor = function(color) { 
    // This is necessary because the browsers representation of a color may be different than what you set. 
    // For instance, you maybe set the color to #ff0000, and when you ask for it, get back rgb(255, 0, 0). 
    var temp = $('<div>'); 
    $('body').append(temp); 
    var expected = temp.css('background-color', color).css('background-color'); 
    temp.remove(); 
    return expected; 
}; 

if ($(this).css('background-color') === getExpectedColor('#157fa0')) { 
    // bingo 
}