CSS點擊事件去掉濾鏡

在Web開發中，我們常常會需要實現一些動態交互效果，其中點擊事件是最常用的一種。而有時候，我們還需要在點擊事件中對已經應用的CSS樣式進行修改，比如去掉濾鏡效果。

CSS中實現點擊事件的方式有多種，可以使用JavaScript來寫回調函數，也可以直接使用CSS屬性selector。這里我們先來介紹一種比較簡單的方式，直接在HTML標簽中應用onClick屬性即可。

比如我們有一個有濾鏡效果的圖片：

<img src="example.jpg" class="filter">


接下來我們來給這個圖片添加一個點擊事件。首先需要在CSS中聲明一些樣式：

.filter{
filter: grayscale(100%);
}
.filter-clicked{
filter: none;
}


這里我們使用了CSS的filter屬性來置灰這個圖片，并定義了一個.filter-clicked樣式，在點擊事件中會用到。

然后在HTML標簽中添加onClick屬性：

<img src="example.jpg" class="filter" onClick="this.classList.toggle('filter-clicked')">


這里使用了classList.toggle()函數，當點擊事件觸發時，將圖片的class屬性從filter切換成filter-clicked（或者相反），從而實現去掉濾鏡效果或者重新應用濾鏡效果的效果。

當然，這種方式并不是最優美的，因為將JavaScript代碼和HTML代碼混合在一起會降低代碼的可讀性和可維護性。但對于一些小型項目或者對代碼規模沒有嚴格要求的場合，這種方式還是很方便實用的。