javascript - 如何在 javascript 中测试 css 颜色

Question

我还是 javascript 和 CSS 的初学者，我有一个书签心形图标，我想根据该图标是选中还是未选中来显示警报。

$('button').on('click', function(){
  $(this).toggleClass('faved');
  if ($(this).hasClass('faved')) {
  alert("red");
} else {
  alert("empty");
}
  
});

@yellow: #FFAC33;
@gray: #CCC;
@red: #E86C6C;

button#favorite {
  background: transparent;
  border: 0;
  span {
    padding: 20px;
    font-size: 70px;
    font-weight: normal;
    color: @gray;
    position: relative;
    span {
      position: absolute !important;
      top: 0;
      left: 0;
      font-size: 70px;
    }
  }
  
}


@keyframes favorite {
  .favorite;
} 

@-webkit-keyframes favorite {
  .favorite;
}

@keyframes favoriteHollow {
  .favoriteHollow;
}

@-webkit-keyframes favoriteHollow {
  .favoriteHollow;
}


button#heart {
  background: transparent;
  border: 0;
  span {
    padding: 20px;
    font-size: 70px;
    font-weight: normal;
    color: @gray;
    position: relative;
    span {
      position: absolute !important;
      top: 0;
      left: 0;
      font-size: 70px;
    }
  }
  &.faved {
    span {
      -webkit-animation: heart 0.5s;      
      animation: heart 0.5s;      
      color: @red;
      span {
        z-index: 1000;
        -webkit-animation: heartHollow 0.5s;      
        animation: heartHollow 0.5s;      
      }
    }
  }
}

.heart {
   {
    transform: scale(1);
  }
  {
    transform: scale(1.2);
    color: @red;
  }
   {
    transform: scale(1.4);
    color: @red;
  }
   {
    transform: scale(1);
    color: @red;
  }
}

.heartHollow {
   {
    transform: scale(1);
    opacity: 1;
  }
   {
    transform: scale(1.4);
    opacity: 0.5;
  }
  {
    transform: scale(1.6);
    opacity: 0.25;
  }
  {
    transform: scale(2);
    opacity: 0;
    display: none;
  }
}

@keyframes heart {
  .heart;
} 

@-webkit-keyframes heart {
  .heart;
} 

@keyframes heartHollow {
  .heartHollow;
}

@-webkit-keyframes heartHollow {
  .heartHollow;
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

<button id="heart">
  <span class="glyphicon glyphicon-heart">
    <span class="glyphicon glyphicon-heart">
    </span>
  </span>
</button>

我知道您的时间很宝贵，感谢您的关注并提前致谢

Answer 1

要检查类，你必须使用 .hasClass('your class name') 或者如果你想检查背景颜色 if($(this).css('background') == "红色")

 $('button').on('click', function(){
      $(this).toggleClass('faved');
      if ($(this).hasClass('faved')) {
          alert("red");
      } else {
          alert("empty");
      }        
    });