CSS可以幫助我們實現一鍵換膚的功能,具體實現方法如下:
// 定義不同主題的樣式 .theme1 { background-color: #F5F5F5; color: #333; } .theme2 { background-color: #000; color: #FFF; } // 通過JavaScript實現一鍵換膚功能 function changeTheme(theme) { var body = document.getElementsByTagName("body")[0]; body.classList.remove("theme1"); body.classList.remove("theme2"); body.classList.add(theme); } // HTML代碼中添加一個按鈕 <button onclick="changeTheme('theme1')">淺色主題</button> <button onclick="changeTheme('theme2')">深色主題</button>
以上代碼中,我們先定義了兩種不同主題的樣式,分別為“theme1”和“theme2”,然后通過JavaScript實現了一個“changeTheme”函數,該函數接受一個參數表示要切換的主題名稱,并將body元素的class屬性從之前的主題類刪除,然后添加當前的主題類。最后,在HTML代碼中增加兩個按鈕,分別點擊切換不同的主題。這樣,用戶便可以簡單地實現一鍵換膚的功能。
上一篇css實現三角形和橢圓
下一篇css實現三角線箭頭