JSでドキュメントのスタイル情報を取得して、JSで新しいCSSを追記します。
下記の四角はサイズだけCSSで記述して描画しています。
width: 200px;
height: 100px;
height: 100px;
後からJSで背景の赤を追加しています。
CSSの記述は以下だけ
<style>
#demo_item {
width: 200px;
}
</style>
<style>
#demo_item {
height: 100px;
}
</style>
これだけだと色はつきません。
その後に以下のようなJSを記述するとCSSを追加変更できます。
//ドキュメントのスタイル情報の取得
var sheets = document.styleSheets
//sheets.lengthは<style>の記述の数
console.log(sheets.length); // 2
//なので最後のstyleは sheets[1]
var sheet = sheets[sheets.length - 1];
//最後のstyleの中にcssを追加する
sheet.insertRule(
'#demo_item { background-color : #F00; }',
sheet.cssRules.length
);
//sheet.cssRules.lengthはCSSのルールの数なのでその後に追加
