這篇是 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> 寫法作為當時的紀錄。