原生JS點擊更換CSS

// 獲取要更換樣式的元素
var styleLink = document.querySelector("#styleLink");
// 設置點擊事件
document.querySelector("#btn").addEventListener("click", function() {
// 更換樣式
if (styleLink.getAttribute("href") === "style.css") {
styleLink.setAttribute("href", "new-style.css");
} else {
styleLink.setAttribute("href", "style.css");
}
});

以上代碼可以實現點擊按鈕時更換CSS樣式。在HTML中，我們需要給要更換樣式的CSS文件添加一個ID，然后在JS中利用querySelector方法獲取這個元素。我們給按鈕添加一個點擊事件，當點擊按鈕時，判斷當前樣式是哪個，進行切換。

注意，需要在HTML文檔中引入兩個CSS文件，而且引入的CSS文件必須有差異性，否則樣式更換不會被感知到。

這種做法雖然簡單有效，但是仍然有一些不足之處，比如當有多個樣式文件需要切換時，會出現冗長和重復的代碼。解決這個問題的方法有很多，比如利用函數進行封裝，把更換樣式的代碼封裝在函數中，然后在事件監聽函數中調用該函數即可。