首頁 >web前端 >js教程 >如何使用 JavaScript 在多個 CSS 樣式表之間切換？

如何使用 JavaScript 在多個 CSS 樣式表之間切換？

PHPz轉載: 2023-09-01 13:29:021237瀏覽

如何使用 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中文網其他相關文章！

JavaScript css html href 样式表

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 FabricJS 設定圓形從左開始的位置？下一篇：如何使用 FabricJS 設定圓形從左開始的位置？

看更多