比较JavaScript中的单元格背景颜色

时间:2017-02-14 15:20:45

标签: javascript

根据表格单元格的当前颜色,我试图更改颜色,或者在鼠标离开单元格时保持相同颜色。这是我的剧本:

<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>

但是我的比较(下面)不起作用。如何在JavaScript中进行比较以使其正常工作?

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

2 个答案:

答案 0 :(得分:0)

尝试比较RGB值:

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

答案 1 :(得分:0)

<强>问题

您遇到的问题是不同的浏览器可能会以不同的方式报告颜色。例如,您可以将颜色设置为#ff0000,但是当您要求它时,您会返回rgb(255, 0, 0)

解决方法

比较背景颜色最安全的方法是使用要比较的颜色创建临时元素。然后,检索temp元素的颜色,并将该颜色与您实际感兴趣的元素的颜色进行比较。当单元测试角度修改元素颜色的指令时,我们使用此解决方法。

示例(使用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
}