ブックマークレットを作成していると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');
コメント