在本教學中，我們將學習使用 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 檔案。
在下面的範例中，我們在頭部添加了樣式表的連結。我們需要新增檔案路徑作為 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;
}
在下面的範例中，我們建立了四個不同的樣式表。此外，我們還在每個 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中文網其他相關文章！
