如何使用 JavaScript 在多個 CSS 樣式表之間切換？
在本教學中，我們將學習使用 JavaScript 在多個 CSS 樣式表之間切換。
你有沒有想過，當你切換TutorialsPoint網站的主題時，它會如何改變整個網站的CSS？這是一個簡單的答案。當使用者按下按鈕時，它會切換網站的 CSS 樣式表，就像刪除白色主題的樣式表並添加深色主題的樣式表一樣。
在這裡，我們將看到使用 JavaScript 在多個 CSS 檔案之間切換的範例。
文法
使用者可以按照以下語法使用 JavaScript 在多個 CSS 檔案之間切換。
if (style.href == 'Path_of dark.css file') {
style.href = 'light.css';
}
else {
style.href = 'dark.css';
}
在上面的語法中，使用者需要新增 dark.css 檔案的完整路徑，以檢查 dark.css 的樣式是否在應用程式中應用，因為我們需要相應地切換 CSS 檔案。
範例 1
在下面的範例中，我們在頭部添加了樣式表的連結。我們需要新增檔案路徑作為 href 屬性的值。
每當使用者點擊「切換主題」按鈕時，它都會呼叫changeStlye()函數。在changeStyle()函數中，我們透過id存取「link」元素。此外，我們檢查'href'屬性的值是否等於dark.css檔案的路徑，並將其變更為'light.css'檔案的路徑；否則，請轉到「dark.css」檔案。
使用者可以在各自的檔案中加入以下程式碼，然後按一下切換主題來切換樣式表。
檔名：index.html
<html>
<head>
<!-- add css file -->
<link rel = "stylesheet" type = "text/css" href = "dark.css" id = "style">
</head>
<body>
<h2> Switching <i> between multiple stylesheets </i> in JavaScript </h2>
<button onclick = "changeStyle()"> Toogle theme </button>
<script>
// change stylesheet using JavaScript
function changeStyle() {
var style = document.getElementById('style');
if (style.href == 'file:///C:/Data%20E/dark.css') {
style.href = 'light.css';
} else {
style.href = 'dark.css';
}
}
</script>
</body>
</html>
檔名：dark.css
* {
background-color: #000;
color: #fff;
}
button{
background-color: white;
color: black;
}
檔名：light.css
* {
background-color: #fff;
color: #000;
}
範例 2
在下面的範例中，我們建立了四個不同的樣式表。此外，我們還在每個 CSS 檔案中為網頁添加了不同的樣式。
每當使用者點擊任何按鈕時，它都會使用樣式表的路徑執行 chageSheet() 函數。在 JavaScript 中，我們使用 setAttribute() 方法來設定 href 屬性值，該方法是在參數中取得的。
使用者可以點擊不同的按鈕，觀察網頁風格的變化。
檔名：-index.html
<html>
<head>
<!-- add css file -->
<link rel = "stylesheet" type = "text/css" href = "style1.css" id = "style">
</head>
<body>
<h2> Switching <i> between multiple stylesheets </i> in JavaScript. </h2>
<button onclick = "changeSheet('style1.css')"> Style 1 </button>
<button onclick = "changeSheet('style2.css')"> Style 2 </button>
<button onclick = "changeSheet('style3.css')"> Style 3 </button>
<button onclick = "changeSheet('style4.css')"> Style 4 </button>
<script>
// change stylesheet using JavaScript
function changeSheet(sheet) {
var style = document.getElementById('style');
style.setAttribute('href', sheet);
}
</script>
</body>
</html>
檔名：- style1.css
#Filename :- style1.css
* {
background-color: pink;
color: black;
}
button{
background-color: white;
color: black;
}
檔名：- style2.css
#* {
background-color: #fff;
color: #000;
}
檔名：- style3.css
#* {
background-color: green;
color: white;
}
檔名：- style4.css
#* {
background-color: blue;
color: white;
}
用戶在本教程中學會了在多個 CSS 檔案之間切換，當我們需要在主題之間切換時，這是一個基本功能。在第一個範例中，我們存取 href 屬性並設定其值。在第二個範例中，我們使用 setAttribute() 方法來設定「href」屬性的新值。
以上是如何使用 JavaScript 在多個 CSS 樣式表之間切換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何在瀏覽器中優化JavaScript代碼以進行性能？
Mar 18, 2025 pm 03:14 PM
本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。
如何使用瀏覽器開發人員工具有效調試JavaScript代碼？
Mar 18, 2025 pm 03:16 PM
本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
如何使用源地圖調試縮小JavaScript代碼？
Mar 18, 2025 pm 03:17 PM
本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
console.log輸出結果差異：兩次調用為何不同？
Apr 04, 2025 pm 05:12 PM
深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異，並解釋其背後的原因。 �...
