インデックスではなく名前で document.styleSheets を取得しますか? 質問する

インデックスではなく名前で document.styleSheets を取得しますか? 質問する

ドキュメント.スタイルシートインデックスと一緒に使用されますが、
使用したい場合はどうすればいいでしょうかスタイルシート.挿入ルール特定の CSS ファイルを使用する場合?

ファイルに名前が付けられており、それがページに挿入され、ある時点で JS 経由で挿入されます。

ベストアンサー1

これを使用する際は、次の点に注意してください。

セキュリティ上の理由から、OperaとMozillaは、別のドメインまたはプロトコルからスタイルシートのcssRulesコレクションにアクセスすることを許可しません。アクセスしようとすると、セキュリティ違反エラーが発生します。

function setStyleRule (selector, rule, sheetName) {
    var sheets = document.styleSheets,
        stylesheet = sheets[(sheets.length - 1)];
    
    for( var i in document.styleSheets ){
        if( sheets[i].href && sheets[i].href.indexOf(sheetName + ".css") > -1 ) {
            stylesheet = sheets[i];
            break;
        }
    }
    
    if( stylesheet.addRule )
        stylesheet.addRule(selector, rule);

    else if( stylesheet.insertRule )
        stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}

更新 - 短いコード:

function getSetStyleRule(sheetName, selector, rule) {
    var stylesheet = document.querySelector('link[href*=' + sheetName + ']')

    if( stylesheet ){
        stylesheet = stylesheet.sheet
        stylesheet.insertRule(selector + '{ ' + rule + '}', stylesheet.cssRules.length)
    }

    return stylesheet
}

// Usage example
getSetStyleRule('main', 'body', 'background:red')

おすすめ記事