JavaScriptでCSSのルールを追加する。

CSSの書き換えできたら便利だと思いませんか？スタイルくらい jQueryでやればいいじゃん。ってのはたしかにそうなんだけど。

jQueryは便利だけど、、、

$("div.tsample").css("width","300px");

jQueryでやると便利なんだけど、CSSじゃないんです。CSS書式で書きたいんですね。SasSとかもいいのですが。やっぱCSSは最強だと思います。共通言語だしね。

CSSはコメントアウトが面倒

でもね、CSSはコメントアウトが面倒なんですよ。行コメントなんで無いの！

/*
div#test{ }

/*
div#sample{ }
*/
div#sample2{ }

*/       /*←閉じの重複問題が発生！*/

Syntax エラー！！ブロックコメントの挟みこみで頻繁に苦労します。

JavaScriptからCSSを制御すると楽かも？

というわけで、JavaScriptから制御できたら便利だと思いませんか？ぼくは、そう思いましたよ。

やりましょう

JSからCSSルールを追加する。

JSからCSSのルールを追加する。

//CSSノード追加
var newStyle = document.createElement('style');newStyle.type = "text/css";
document.getElementsByTagName('head').item(0).appendChild(newStyle);
css = document.styleSheets.item(0)
//追加
var idx = document.styleSheets[0].cssRules.length;
css.insertRule("dl.list_content > dd.menu  div.body { outline: solid 1px red; }", idx);//末尾に追加

とする。あれ？意外と簡単。

これでコメントアウト問題に光明が。

//css.insertRule("dl.list_content > dd.menu  div.body { outline: solid 1px red; }", idx);
css.insertRule("dl.list_content > dd.menu  div.body { outline: solid 2px blue }", idx);

行コメントアウトができますね。

document.styleSheets がスタイルシート

動作原理についてちょっと言及。　document.styleSheets　でスタイルシートを参照できる。styleSheetsは配列。で、styleSheetsはCSSStyleSheetの配列になっています。CSSStyleSheetは、スタイルシートをJsから扱うクラスです。とりあえず、すぐ使えるのはスタイルシートの無効化です。

つまり

document
- styleSheets
  1. CSSStyleSheet
  2. CSSStyleSheet
  3. CSSStyleSheet
  4. CSSStyleSheet

という関係です。

スタイルシートを一括で無効化する

以下の一行を実行すると、現在のスタイルシートが全て無効になります。

for(var i=0;i<document.styleSheets.length;i++){ document.styleSheets.item(i).disabled=true }

これをコンソールで実行してみて下さい。一目瞭然です。

ほぼスタイル外れます、一つはずつ消していって、どれが外れるかで、このStyleタグが何を見てるのか大体わかります。

スタイルシートが記述されているタグを示す。

Styleは外部もタグ内部も含め、Styleタグに書かれます。どのタグがどの外部スタイルシートに対応するのかを調べるのは以下のとおりです。

for(var i=0;i<document.styleSheets.length;i++){ 
 console.log(document.styleSheets.item(i).ownerNode)
}

要はStyleタグの取得です。DOM中の何番目のStyleタグが何処にあるか調べます。

スタイルは、HTMLソースを見て検討をつけたほうが楽。闇雲に探すより、Styleタグを探すのが楽かな。

スタイルシートをたどる

たどり着いたら、中身を確認して安心する。style作業は、ひたすら繰り返しです。*1

var stylesheet = document.styleSheets.item(1);
stylesheet.cssRules.item(0).cssText
//#=>".retail-tabs {
//          background-image: url(https://images-na.ssl-images-amazon.com/images/G/09/nav2/images/skins/teal/tabs-line.jpg); }"

ルールを足す。

var stylesheet = document.styleSheets.item(1);//既存スタイルを取得し
stylesheet.cssRules.item(0).cssText//確認したら
//追加します。
css.insertRule("dl.list_content > dd.menu  div.body { outline: solid 1px red; }", 0 );

簡単ですね。０はブラウザに依っては省略可能で、０を指定すると、先頭に、lengthを指定すると末尾にルールを追加します

既存のルールを消す

ここまでで、ルールをたどり方がわかったので、不要スタイルを消してみます。

var stylesheet = document.styleSheets.item(1);//既存スタイルを取得し
stylesheet.cssRules.item(0).cssText//確認したら
//消す
stylesheet.deleteRule(0);

insertRuleと同じで、０を指定したら先頭のルールを消します。

既存ルールに影響しないように、新しいStyleタグの中で作業したい。

Styleタグを作るそうです。

//CSSノード追加
var blankStyle = document.createElement('style');
blankStyle.type = "text/css";
document.getElementsByTagName('head').item(0).appendChild(blankStyle);

これで新しいStyleタグがあるので、自由に遊べます。

参考資料

http://uhyohyohyo.sakura.ne.jp/javascript/5_2.html

*1:*

それマグで！

知識はカップより、マグでゆっくり頂きます。　takuya_1stのブログ