我仍然是javascript和CSS的初學(xué)者,我有一個(gè)書簽心形圖標(biāo),希望根據(jù)該圖標(biāo)是選中還是未選中來顯示警報(bào)。$('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;}
如何在JavaScript中測試CSS顏色
慕哥9229398
2021-04-16 15:11:53