網頁中需要使用 CSS 樣式來為頁面增加美觀性和交互性。在 HTML 中應用 CSS 樣式有兩種方法：內部和外部。內部樣式使用 <style> 標簽直接嵌入 HTML 文件中；外部樣式則將樣式代碼保存在一個獨立的 .css 文件中，在 HTML 中引用。本文重點介紹使用 JavaScript 加載外部 CSS 樣式的方法。
JavaScript 可以通過 DOM 操作的方式動態地加載外部 CSS 樣式。具體方法是使用 <link> 標簽，將引用外部樣式文件的相關屬性動態添加到 HTML 中。以下是一個加載樣式的 JavaScript 范例：
// 1. 創建 <link> 標簽
var cssLink = document.createElement("link");
// 2. 添加屬性
cssLink.href = "style.css"; // 樣式文件
cssLink.rel = "stylesheet"; // 樣式類型
cssLink.type = "text/css"; // 文件類型
// 3. 將 <link> 標簽添加到 <head> 中
document.head.appendChild(cssLink);上述代碼中，首先創建一個 <link> 元素，并通過 DOM 操作為它添加相關屬性信息，如 href 屬性表示要加載的樣式文件名，rel 屬性定義樣式類型，type 屬性規定文件的 MIME 類型等。最后將 <link> 元素添加到 <head> 標簽中即可，這樣頁面就能夠動態地執行樣式了。
通過 JavaScript 動態地加載 CSS 樣式有一些特殊的應用場景。例如，在響應用戶操作時，可以使用 JavaScript 動態地加載相應的樣式文件，以表明用戶選擇了哪些選項。又如，開發移動應用時，可以通過 JavaScript 動態切換樣式，從而適配不同尺寸的屏幕。這些特殊應用場景充分發揮了 JavaScript 加載樣式的靈活性和可擴展性。
上一篇css里h1是什么意思
下一篇js和css外部空間