資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 載入 CSS 檔案？
有時，任務需要更改頁面主題並在同一頁面內容上使用不同的 CSS 檔案。在這種任務中，需要獲取 CSS 並動態載入它，同時選擇主題。在這種情況下，CSS 檔案必須透過 JavaScript 程式進行訪問、載入甚至選擇。本文使用 HTML 和 JavaScript 程式碼演示了載入 CSS 檔案的過程。這透過兩個不同的示例來展示。在第一個示例中，在視窗載入事件中選擇 CSS 檔案。在第二個示例中，使用兩個按鈕在按鈕點選時載入單獨的 CSS 檔案。
示例 1：在 window.onload() 中載入 CSS 檔案
資料夾和頁面設計步驟 −
步驟 1 − 建立一個 html 檔案並開始編寫程式碼。建立一個 CSS 檔案並定義背景、p 標籤和 h1 標籤的樣式。
步驟 2 − 在 html 檔案的 <script> 標籤內，編寫頁面完全載入後將執行的程式碼。為此，使用 window.onload()。
步驟 3 − 在 <script> 標籤內編寫程式碼以首先獲取 head 標籤。然後建立一個 link 標籤並設定其屬性。
步驟 4 − 選擇 css 檔案並將其新增到 link 的 href 屬性中。
步驟 5 − 現在將建立的 link 新增到 head 標籤中。
步驟 6 − 在瀏覽器中載入 HTML 檔案並檢查結果。
主 html 檔案：loadcss1.html
使用的 CSS 檔案：cssfilenew.css
loadcss1.html 程式碼
<!DOCTYPE html>
<html>
<head>
<script>
// run this function when the document is loaded
window.onload = () => {
var headTag = document.getElementsByTagName('head')[0]
const linkforCSSfile = document.createElement("link"); How to load CSS files using JavaScript?
linkforCSSfile.href = 'cssfilenew.css'
linkforCSSfile.type = 'text/css'
linkforCSSfile.rel = 'stylesheet'
headTag.appendChild(linkforCSSfile);
document.body.appendChild(headTag);
};
</script>
</head>
<body>
<h1>Example 1</h1>
<p id="showaddedCSS"> To load the CSS file using JS</p>
</body>
</html>
cssfilenew.css 程式碼
body {
background-color: rgb(110, 187, 197);
}
h1 {
color: rgb(15, 15, 87);
}
p {
color: rgb(197, 31, 31);
}
檢視結果
要檢視結果，請在瀏覽器中開啟 html 檔案。樣式將包含在使用 Javascript 載入的 CSS 檔案中。
示例 2：點選兩個按鈕載入不同的 CSS 檔案
資料夾和頁面設計步驟 −
步驟 1 − 建立一個 HTML 檔案並開始編寫程式碼。建立兩個 CSS 檔案，並在其中定義背景、p 標籤和 h1 標籤的不同樣式。
步驟 2 − 在 HTML 檔案的 <script> 標籤內，建立兩個函式，function1 和 function2。編寫這些函式的程式碼，這些程式碼將在呼叫這些函式時執行。
步驟 3 − 在 <script> 標籤內，在這兩個函式中編寫程式碼以首先獲取 head 標籤。然後建立一個 link 標籤並設定其屬性。
步驟 4 − 透過這兩個函式選擇不同的 CSS 檔案，並將這些檔案新增到 link 的 href 屬性中。
步驟 5 − 將建立的 link 新增到 head 標籤中。
步驟 6 − 現在建立兩個按鈕，並在不同的按鈕點選時呼叫這兩個函式。
步驟 7 − 載入瀏覽器中的 HTML 檔案。CSS 檔案最初不會被新增。它將在點選按鈕時新增。點選這兩個按鈕並檢查結果。
主 HTML 檔案：loadcss2.html
使用的 CSS 檔案：cssfile.css 和 cssfilenew.css
loadcss2.html 程式碼
<!DOCTYPE html>
<html>
<head>
<script>
// run this function when the document is loaded
function1 = () => {
var headTag = document.getElementsByTagName('head')[0]
const linkforCSSfile = document.createElement("link");
linkforCSSfile.href = 'cssfile.css'
linkforCSSfile.type = 'text/css'
linkforCSSfile.rel = 'stylesheet'
headTag.appendChild(linkforCSSfile);
document.body.appendChild(headTag);
};
function2 = () => {
var headTag = document.getElementsByTagName('head')[0]
const linkforCSSfile = document.createElement("link");
linkforCSSfile.href = 'cssfilenew.css'
linkforCSSfile.type = 'text/css'
linkforCSSfile.rel = 'stylesheet'
headTag.appendChild(linkforCSSfile);
document.body.appendChild(headTag);
};
</script>
</head>
<body>
<h1>Example 1</h1>
<p id="showaddedCSS"> To load the CSS file using JS</p>
<button onclick="function1()">Load CSS file One</button>
<button onclick="function2()">Load CSS file Two</button>
</body>
</html>
cssfile.css 程式碼
body {
background-color: rgb(167, 197, 110);
}
h1 {
color: rgb(87, 15, 55);
}
p {
color: rgb(4, 59, 20);
}
cssfilenew.css 程式碼
body {
background-color: rgb(110, 187, 197);
}
h1 {
color: rgb(15, 15, 87);
}
p {
color: rgb(197, 31, 31);
}
檢視結果
要檢視結果，請在瀏覽器中開啟 html 檔案。樣式將包含在點選按鈕載入的 CSS 檔案中。
本文使用兩個不同的示例，介紹瞭如何使用 javascript 程式碼動態載入 CSS 檔案的方法。首先介紹了在頁面載入時選擇 CSS 檔案的方法，然後介紹了在按鈕點選時使用 CSS 檔案的方法。為此，點選兩個按鈕來載入不同的 CSS 檔案並更改同一頁面的樣式。
6K+ 次瀏覽
