javascript - 如何在javascript中测试css颜色
问题描述
我仍然是 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>
我知道您的时间很宝贵,感谢您的关注并提前感谢您
解决方案
用于检查您必须使用的课程,.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");
}
});
推荐阅读
- xml - 获取嵌套 XML 模式的数据框
- c++ - 如何在arduino中制作另一个类库的实例变量
- algorithm - 线性回归的梯度下降未找到最佳参数
- python - 如何在急切执行中使用 tf.while_loop?
- laravel - 如何在 laravel 搜索控制器中执行循环?
- java - Spring Cloud Wiremock 在测试期间不会从 JSON 文件中选择转换器
- c++ - 在测试中使用 unique_ptr 时出现无效指针错误
- java - 如何验证 Mockito 满足多个条件之一?是否可以验证是否调用了一种或另一种方法?
- javascript - 试图将未定义的属性 findOneAndUpdate 包装为函数
- selenium - 如何处理 hdfc 网站中的意外广告弹出?