[暴満館] 2006年5月のエントリ

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
このエントリの固定リンク: http://bmky.net/diary/log/1381.html
ブックマークに追加する
コメント: コメントを投稿する

SBM Comments

kyorecoba: 本当にCopyURL+になってしまいます。
nikutetu: C:\（ユーザー名）\AppData\Roaming\Opera\Opera\menu.iniでできるみたいhttp://twitter.com/amayav/status/5396066616
min3: 後で適応させたいです…
mindexinfo

2006
0513

Tagscss javascript

⇧

King's Field Additional I

●リアルタイム戦闘ダンジョン内で敵とエンカウントすることで戦闘画面へ意向。戦闘はリアルタイムで進行。

エ、エンカウントて。

◆【PSP】キングスフィールド　アディショナル1
・PSP、7月20日発売、3990円
・本作発売の一ヶ月後(8月24日)にアディショナル2が発売され、プレイデータの連動。
・１で取った行動が２の物語に大きく影響を与え、アイテムなども引き継ぎ可能。
・物語は一作ごとに独立しているが2作両方プレイすることで物語の真実にたどり着ける。
・本作はキングス3の10年後が舞台。ヴァーダイト編の真の結末が描かれる。

雑誌フラゲ情報2006/05/10(水)

どうみても分割商ｈ

あー、ちゃんと作ってたんだな。てっきり名前だけ出しといてフェードアウトするのかと思ってたよ。

・・・もしかしてこれが最後のキングスフィールド？

Info

投稿日: 2006年5月10日
タグ: game
このエントリの固定リンク: http://bmky.net/diary/log/1380.html
ブックマークに追加する
コメント: コメントを投稿する

2006
0510

Tagsgame

⇧

全称セレクタ

グループ化

まとめ

どうでもいいこと

愚痴

愚痴 その2

愚痴その2