CSS是網(wǎng)頁(yè)設(shè)計(jì)中使用的一種語(yǔ)言。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，我們經(jīng)常需要實(shí)現(xiàn)一些功能，比如點(diǎn)贊按鈕。使用CSS可以很方便地實(shí)現(xiàn)點(diǎn)贊功能，接下來(lái)我們來(lái)看看如何實(shí)現(xiàn)。

/*點(diǎn)贊前的樣式*/
.icon-heart{
font-size:24px;
color:#999;
cursor:pointer;
}
/*點(diǎn)贊后的樣式*/
.icon-heart.active{
color:#f00;
}

我們可以首先為點(diǎn)贊前和點(diǎn)贊后兩種狀態(tài)的圖標(biāo)設(shè)置樣式，點(diǎn)贊前的顏色為灰色，點(diǎn)贊后的顏色為紅色：

當(dāng)用戶點(diǎn)擊點(diǎn)贊按鈕時(shí)，我們就需要改變按鈕的狀態(tài)，添加一個(gè)class名為“active”：

// 添加點(diǎn)贊事件
document.querySelector('.icon-heart').onclick = function(){
this.classList.toggle('active');
}

觸發(fā)點(diǎn)擊事件后，我們使用classList.toggle()方法來(lái)添加或刪除“active”這個(gè)class，實(shí)現(xiàn)點(diǎn)贊后按鈕樣式的改變。

通過(guò)以上代碼，我們就可以很輕松地實(shí)現(xiàn)點(diǎn)贊功能了。CSS不僅可以實(shí)現(xiàn)點(diǎn)贊功能，還可以實(shí)現(xiàn)很多其他的功能。在網(wǎng)頁(yè)設(shè)計(jì)中，CSS是一個(gè)非常重要的工具。