How to test css color in javascript

Question

I'm still a beginner in javascript and CSS, I have a bookmark heart icon I want to show alert depending if the icon checked or unchecked.

$('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>

I know your time is valuable and I appreciate your attention and thank you in advance

Do you mean if ($(this).hasClass('faved')) {}?

Ryan Nghiem
– Ryan Nghiem

2019-04-08 11:08:32 +00:00
Commented Apr 8, 2019 at 11:08 — Ryan Nghiem
– Ryan Nghiem, Commented Apr 8, 2019 at 11:08

Udhay Titus · Accepted Answer · 2019-04-08 11:49:26Z

1

for checking class you have to use .hasClass('your class name') or if you want to check background color if($(this).css('background') == "red")

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

answered Apr 8, 2019 at 11:49

Udhay Titus

5,8674 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to test css color in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related