[JavaScript] Style要素の追加方法

ブックマークレットを作成しているとcssを追加したい時がありますよね｡

通常であればcssをアップロードし読込むだけですが､ブックマークレットとなるとcssを置く場所が無かったり､別途cssファイルを用意する程でもないことが多いと思います｡

そのようなときに使えるJavaScriptでStyle要素を作成する方法です｡

Style要素を作成しHeadに挿入

Style要素を空のままHeadに挿入します｡
スタイルシートはDocumentと関連付けされている必要がある為､
Headに挿入する前に操作しようとしてもCSSStyleSheetがありません｡

let style = document.createElement('style');
document.head.appendChild(style);

CSSルールの追加､削除

セレクタ毎に追加します

let sheet = style.sheet; //CSSStyleSheet
//追加
sheet.insertRule('.mt10 {margin:10px}');
sheet.insertRule('.bg_red {background-color:#8b0000}');
//削除
sheet.deleteRule(1); //.bg_redの削除

CSSStyleSheet - Web API | MDN

CSSStyleSheet インターフェイスは、1 枚の CSS スタイルシートを表します。これは、その親の StyleSheet からプロパティとメソッドを継承します。

メディアクエリ

//追加
sheet.media.appendMedium('print');
sheet.media.appendMedium('screen');
//削除
sheet.media.deleteMedium('print');

StyleSheet.media - Web API | MDN

media は StyleSheet インターフェイスのプロパティで、スタイル情報の対象となる出力先メディアを指定します。これは読み取り専用の配列風の MediaList オブジェクトで、 deleteMedium() で削除し、 appendMedium() で追加することが可能です。

HTML上では空のStyle要素になってますがCSSが反映されます

おまけ

セレクタを指定してルールの削除

let deleteRule = (sheet,selector)=>{
    let rules = sheet.cssRules;
    let ruleIdxs = Object.keys(rules).filter(idx => rules[idx].selectorText == selector);
    ruleIdxs.reverse().forEach(idx=>sheet.deleteRule(idx));
}
deleteRule(sheet,'.mt10');