JavaScript 動態創建樣式表與樣式規則：高效操作 CSSOM 避免 DOM 遍歷

為什麼要動態操作樣式表？

傳統方式遍歷 DOM 元素逐個修改 style 屬性效率低。直接向 CSSStyleSheet 插入規則，瀏覽器自動匹配應用，性能更優、代碼更簡潔。

獲取現有樣式表

var sheets = document.styleSheets; // StyleSheetList
var sheet = sheets[0]; // 取第一個

// 檢查 media 類型，避免誤改 print 樣式表
console.log(sheet.media.mediaText); // "all", "screen", "print" 等

創建新樣式表 (推薦方式)

var sheet = (function() {
    var style = document.createElement('style');
    // 可設置 media: style.setAttribute('media', 'screen');
    // WebKit 補丁：必須先 appendChild 文本節點
    style.appendChild(document.createTextNode(''));
    document.head.appendChild(style);
    return style.sheet; // 返回 CSSStyleSheet
})();

添加規則：標準方法

1. insertRule (現代標準)

sheet.insertRule('header { float: left; opacity: 0.8; }', 0);
// 參數：完整 CSS 規則字符串、插入索引

2. addRule (IE 兼容)

sheet.addRule('#myList li', 'float: left; background: red !important;', 1);
// 參數：選擇器、樣式聲明、索引 (默認 -1 追加)

跨瀏覽器封裝

function addCSSRule(sheet, selector, rules, index) {
    if (sheet.insertRule) {
        sheet.insertRule(selector + '{' + rules + '}', index);
    } else {
        sheet.addRule(selector, rules, index);
    }
}

// 使用
addCSSRule(document.styleSheets[0], 'header', 'float: left; color: #333;');

媒體查詢規則

方式一：insertRule 完整寫入

sheet.insertRule('@media only screen and (max-width: 1140px) { header { display: none; } }');

方式二：創建專用 <style media="...">

var mqStyle = document.createElement('style');
mqStyle.setAttribute('media', 'only screen and (max-width: 1024px)');
mqStyle.appendChild(document.createTextNode(''));
document.head.appendChild(mqStyle);
mqStyle.sheet.insertRule('header { display: none; }', 0);

優勢總結

• 性能：瀏覽器原生選擇器匹配，無 JS 遍歷開銷
• 維護：規則集中管理，易於動態增刪改
• 靈活：支持媒體查詢、偽類、動畫等完整 CSS 功能
• 調試：DevTools Elements → Styles 可見動態插入規則，來源顯示為 "inline" 或文件名

注意事項

1. 跨域樣式表 (href 為不同源) 無法讀取 cssRules (安全限制)
2. 大量規則插入時建議批量構建字符串一次性 insertRule 或創建獨立 <style>
3. 規則優先級遵循標準 CSS 級聯規則，!important 可覆蓋索引順序

總結

掌握 CSSStyleSheet.insertRule/addRule 及動態創建 <style> 技術，能實現高性能、可維護的動態樣式管理。現代項目推薦優先使用 insertRule，配合封裝函數兼容舊 IE。媒體查詢場景可選擇完整規則插入或獨立媒體樣式表兩種模式。