點擊過后改變 CSS 樣式是一個在網(wǎng)頁開發(fā)中常見的需求。可以通過 JavaScript 監(jiān)聽點擊事件,然后使用 DOM API 改變元素的 CSS 屬性實現(xiàn)。下面是一個示例:
<!DOCTYPE html> <html> <head> <style> .box { width: 100px; height: 100px; background-color: #ccc; cursor: pointer; } .box.clicked { background-color: #f00; } </style> </head> <body> <div class="box" onclick="this.classList.toggle('clicked')"></div> </body> </html>
上面的代碼中,定義了一個 class 為 box 的 div 元素,并設置了其初始的 CSS 樣式。在該元素上添加了 onclick 事件監(jiān)聽器,并在點擊時使用 classList.toggle 方法添加或刪除 clicked class,從而實現(xiàn)改變背景顏色的效果。
使用 JavaScript 改變 CSS 樣式是一個強大的技巧,可以實現(xiàn)很多動態(tài)效果,如實現(xiàn)彈出窗口、菜單、動畫等。需要注意,頻繁修改 CSS 樣式可能會影響性能,因此應該根據(jù)實際需求謹慎使用。
上一篇點擊狀態(tài)css
下一篇點擊圖片上下滑動css