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