如何在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;}

Answer 1

用于检查您必须使用的类.hasClass('your class name')或要检查背景色if($(this).css('background') == "red")

 $('button').on('click', function(){

      $(this).toggleClass('faved');

      if ($(this).hasClass('faved')) {

          alert("red");

      } else {

          alert("empty");

      }        

    });