Javascriptを使ってCSSルール(例:strong { color: red }`)を追加するには?
単純で直接的な方法は、新しい style
ノードを作成してドキュメントに追加することです。
// あなたのCSSをテキストとして
var styles = `
.qwebirc-qui .ircwindow div {.
font-family:Georgia,Cambria,"Times New Roman",Times,serif;
margin: 26px auto 0 auto;
max-width: 650px;
}
.qwebirc-qui .lines {.
font-size: 18px;
line-height: 1.58;
文字間隔: -0.004em;
}
.qwebirc-qui .nicklist a { 。
margin: 6px;
}
`
var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)
また、DOM Level2のCSSインターフェイスを使って行うこともできます(MDN)。
var sheet = window.document.styleSheets[0];
sheet.insertRule('strong { color: red; }', sheet.cssRules.length);
...ただし、(当然ながら)IE8以前では、わずかに異なる独自の表現を使用しています。
sheet.addRule('strong', 'color: red;', -1);
createElement-set-innerHTMLメソッドと比較して、innerHTMLに特殊なHTML文字を入れることを気にしなくてよいという理論的な利点がありますが、実際にはstyle要素はレガシーなHTMLではCDATAであり、'<'や'&'はいずれにせよスタイルシートではほとんど使用されません。
このようにスタイルシートに追記するためには、スタイルシートが必要です。このスタイルシートは、既存のアクティブなスタイルシートであれば、外部でも埋め込みでも、空でも問題ありません。もし存在しない場合は、現時点での標準的な作成方法は、createElementです。