資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 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
在下面的示例中，我們在 head 部分添加了樣式表的連結。我們需要將檔案路徑作為 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”屬性的新值。
1K+ 瀏覽量
