JavaScript から CSS のルールを管理する
忘却録。
<style> を追加する
addLocalStyle.js// CSSを追加する
var addLocalStyle = function(text) {
var style = document.createElement('style');
style.type = 'text/css';
style.textContent = text;
document.head.appendChild(style);
};<style> を追加することで CSS コードをページ（ドキュメント）に追加します。
これは、 JavaScript から CSS のインターフェイスを理解することなく、 CSS コードを追加する簡単な方法です。この方法は、 JavaScript による要素（Element）追加だけで、 CSS のルール追加を実現しています。
※要素を id 等で識別することで、削除することもできます。
※CSSの優先順位は、より後にあるものを優先します。
そのため、<head>内よりも<body>内にあるものの方が優先される。
ただし、基本的に<style>は、<head>内に配置する要素です。
使用例
addLocalStyle(`
.sample1 { background: red !important; }
.sample2 { background: blue !important; }
`);スタイルシートの管理（document.styleSheets）
for (const sheet of document.styleSheets) {
console.log(sheet);
try {
let i = 0;
for (const rule of sheet.cssRules) {
console.log(rule);
if (++i >= 5) { console.log('...'); break; }
}
} catch (e) { /* Cannot access rules 対策 */ }
}JavaScript の CSS 用のインターフェイスです。シートの追加・削除、ルールの追加・削除・確認を行えます。ただし、癖が強いため、使用には難があります。
※Document: styleSheets プロパティ - Web API | MDN
※「Cannot access rules」への対策が必要です。
上位権限（ブラウザ・拡張機能等）の追加したルールは、下位権限（ウェブページ）からはアクセス（追加・削除・参照）ができません。
要素 style 属性の取得と変更（Element.style）
var element = document.getElementById('element-id');
//element.style.background = '#f00';
element.style.setProperty('background', '#f00');
//console.log('color', element.style.color);
console.log('color', element.style.getPropertyValue('color'));要素の style 属性に JavaScript からアクセスして取得・変更ができます。ただし、 CSS 継承を考慮した値を取得できるわけではありません、要素単体に適用されている style 属性値を取得・変更できます。そのため、継承元・シートのルールを取得・変更できるわけではありません。
要素に適用された CSS プロパティを取得（window.getComputedStyle()）
var element = document.getElementById('element-id');
var compStyles = window.getComputedStyle(element);
console.log('color', compStyles.getPropertyValue('color'));要素のすべての CSS プロパティ値を含むオブジェクトを返します。 CSS 継承を考慮した要素に適用されている値を取得できます。ただし、プロパティは読み取り専用です。
メディアクエリーを解釈する（window.matchMedia()）
if (window.matchMedia("(min-width: 400px)").matches) {
/* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
} else {
/* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
}ビューポートの幅などの CSS で使用できるメディアクエリーを JavaScript で判定します。また、メディアクエリーの変更をリッスンすることもできます。
※メディアクエリーの使用 - CSS: カスケーディングスタイルシート | MDN
※window.matchMedia - Web API | MDN