JavaScriptでCSSのコードを追記
Webサイトを制作していると特定のページにCSSのセレクタを上書きして適用したいことがある。
例えば、h1を赤色、#footer aをオレンジ色にしたいなどです。
h1 {
color: red;
}
#footer a {
color: orange;
}
この場合、よくあるのは以下のようにdocument.querySelector()で要素を指定して適用するか、styleタグを生成してhead内に入れるパターンです。
document.querySelector('h1').style.color = 'red'
document.querySelector('#footer a').style.color = 'orange'
const style = document.createElement('style')
style.textContent = `
h1 {
color: red;
}
#footer a {
color: orange;
}
`
document.head.appendChild(style)
document.styleSheetsを利用してコードを追記する
前述のやり方だと特定のCSSファイル(例: common.css)が読み込まれているページのみに適用させることができない。
もし特定のCSSファイルがあるページのCSSに追記して適用したい場合、document.styleSheetsで指定したCSSファイルがあった場合は、そのCSSファイルの末尾に追記するようinsertRuleメソッドを使用すれば実装できます。
const CSSPath = 'https://iwb.jp/s/common.css'
const insertRuleCode = `
h1 {
color: red;
}
#footer a {
color: orange;
}
`.replaceAll('}', '}}').split(/}\n/).filter(String)
for (let stylesheet of document.styleSheets) {
if (stylesheet.href && (stylesheet.href).match(/[^\?]+/)[0] === CSSPath) {
for (let insertRuleText of insertRuleCode) {
stylesheet.insertRule(insertRuleText, stylesheet.cssRules.length)
}
break
}
}
JavaScriptで特定のCSSファイルにコードを追記するサンプル
