跳到主要內容
前端開發

用 JavaScript 動態建立與停用 CSS 檔案

2018 年整理的動態 CSS 筆記,包含建立 link 元素、以亂數參數避開快取,以及用 jQuery 停用樣式表。

W

這篇是 2018 年整理用 JavaScript 動態建立與停用 CSS 檔案時留下來的筆記。

動態建立 CSS 檔案

// CSS 亂數
var styleRandom = Math.floor(Math.random() * 1000);

// 建立 CSS 檔案
var styleDocument = document.createElement("link");

// 設定 CSS 路徑
styleDocument.rel = "StyleSheet";
styleDocument.href = "css/01.css" + "?" + styleRandom;

// 將 CSS 文件加入 head
document.head.append(styleDocument);

停用 CSS

$("link[href='_css/Mobile_landscape.css']").prop("disabled", true);

2026 年後記

動態建立 <link> 與停用樣式表的做法現在仍可使用;原文在網址加亂數是為了避開瀏覽器快取,但也會讓每次載入都使用不同網址。現在的建置工具通常會以檔名雜湊處理靜態資源快取。

如果需求是直接用 JavaScript 建立並套用樣式表,也可以參考《document.adoptedStyleSheets:不用 link 元素也能動態套用樣式》。這裡保留原本的 <link> 寫法作為當時的紀錄。

分享這篇