Home / Diary / JavaScriptでCSSを弄る際のメモその2

JavaScriptでCSSを弄る際のメモその2

このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。

前回同様、結構適当に書いてる部分もあるので鵜呑みにしないように。

IEとMozillaでは、スタイルシートの値を取得するには以下の処理を利用すればよい。

function getStyleValue( selector, property ) {
  property = ( property.match( /-/ ) ) ? property.camelize( ) : property;
  var stylesheets = document.styleSheets[0].rules  //IE
                 || document.styleSheets[0].cssRules; //Mozilla
  for( var i = 0, len = stylesheets.length; i < len; i++ ) {
    var css = stylesheets[i];
    if( css.selectorText.toLowerCase( ) == selector.toLowerCase( ) ) {
      if( css.style[ property ] ) return css.style[ property ];
    }
  }
  return null;
}

しかし・・・

全称セレクタ

IEにはほとんどの場面で取得出来なくなる仕様が存在する。

ul * { line-height : 150% }

このようにスタイルシートに記述していた場合

getStyleValue( "ul *", "line-height" );

このようにしてもIEでは取得できない。どうやら内部でアスタリスクが消されるようで、document.styleSheets[0].rulesを参照しても、上記の場合はselectorTextがulのみになってしまう。

じゃあアスタリスクを除いたulだけ指定して取得すればいいじゃん、と思うが

ul { margin : 1em }
ul * { margin : 0.5em }

もし、このように指定されていたら、forループ中に先に指定したulがひっかかってしまい、本来取得したいul要素の子要素全てのmarginは取得できなくなってしまう。

ブラウザの差異を無くすために以下のように記述することがある。

* {
margin : 0;
padding : 0;
font-size : 100%;
font-weight : normal;
font-style : normal;
line-height : 100%;
list-style-type : none;
}

この場合は以下のようにすることで取得することができる。

getStyleValue( "", "line-height" );

ちなみに

ul * span { line-height : 150% }

これを取得する場合は以下のようにする。

getStyleValue( "ul  span", "line-height" );

スペースを二つ空けるのがポイント。一つではダメ。

これらは全てIEのみで、mozillaは関係ない。

グループ化

ul li, span { line-height : 150% }

カンマで区切ってグループ化する場合、IEでは内部で分解される。

getStyleValue( "ul li", "line-height" );
getStyleValue( "span", "line-height" );

上記で両方とも取得できる。が、「ul li, span」では取得できない。

逆にmozillaは内部で分解されないので

getStyleValue( "ul li, span", "line-height" );

と指定する必要がある。ややこしい。

まとめ

JavaScriptでCSSを弄るつもりなら、全称セレクタは使うな。グループ化は避けろ。

そこでプロパティ別整理法をプッシュしてみる。

全てとは言わず、デザイン段階での変更頻度が高い「margin、padding、color、background、border」あたりだけでもやっておくと結構楽。ただし、CSSのサイズが小さい場合は逆効果。

どうでもいいこと

getStyleValueを、同じセレクタで複数スタイルを指定していても（たぶん）大丈夫なように変更。

愚痴

OperaはWidgets実装して浮かれてる暇があったらさっさとDOM2 CSSをサポートしやがれ。ってゆーかサポートしてくださいお願いしますおぺらたん。

愚痴その2

IE7はタブ+RSS実装して浮かれてる暇があったらさっさとdataスキームを実装しやがれ。

Info

投稿日: 2006年5月13日
タグ: css、javascript
このエントリのURL
このエントリへのリンク（HTMLタグ）
ブックマークに追加する

Navigation

関連のあるエントリ: 2006-01-20 枠付きグラデで四角い角を丸くする - Nifty++; 2006-01-17 JavaScriptで枠付き丸角をつける; 2006-08-24 JavaScriptでCSSを弄る際のメモをまとめた; 2006-06-14 JavaScriptでCSSを弄る際のメモその3 Opera9について; 2006-03-14 JavaScriptでCSSを弄る際のメモ
新しいエントリ（日付順）: レゲー小ネタ　詰め合わせ
古いエントリ（日付順）: King's Field Additional I

SBM Comments

mhrs: IEの罠。「JavaScriptでCSSを弄るつもりなら、全称セレクタは使うな。グループ化は避けろ。」
ll_koba_ll: JavaScriptでCSSを弄る際のメモその2
ll_koba_ll
facet: 愚痴つき。ｗ
nilab: 暴満館 � JavaScriptでCSSを弄る際のメモその2
hiro_y: JavaScriptでスタイルシートを操作、続編。
brazil: CSS、IE、セレクタ、←Behaviour、←cssQuery
akiyan: 意外なところで久しぶりにプロパティ別整理法を言及されました。

Comment

投稿したコメントは公開されません。サイトオーナーのみが閲覧できます。
返信等を希望する場合は、コメント内に連絡先のメールアドレスかサイトのURLを入力してください。

2006
0513

Tagscss javascript

⇧

JavaScriptでCSSを弄る際のメモ その2

全称セレクタ

グループ化

まとめ

どうでもいいこと

愚痴

愚痴 その2

JavaScriptでCSSを弄る際のメモその2

愚痴その2