Home / Diary / JavaScriptでCSSを弄る際のメモその3 Opera9について

JavaScriptでCSSを弄る際のメモその3 Opera9について

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

前々回、前回同様いい加減な部分もあるので、鵜呑みにしないように。

Changelog

…

Added support for DOM level 2 Style Sheets and associated parts of DOM level 2 CSS. (Yay!!)

Friday once more! - Opera Desktop Team

DOM2CSSが遂に！

早速インストールして色々試してみたけど、基本はFirefoxと一緒でIEの良いとこ取りになってる。コードの書き換えはほとんど必要なし。ありがとう、おぺらたん！

スタイルシートルールの追加と無効

基本的な方法は前々回と一緒。3ブラウザ共通。

スタイルシートルールの取得

基本的な使い方は前々回と一緒。

Operaの場合、返ってくる値の自動補完は無効。つまりIEと一緒で、実際に記述したプロパティの値しか返ってこないっぽい。

div.hoge { background : #668 }

getStyleValue( "div.hoge", "background" );
//IE : #668
//Firefox : rgb(136, 102, 102) none repeat scroll 0% 0%
//Opera : #668

要素に適用されているスタイルを取得する

ここでちょいと前々回の修正。

FirefoxはgetComputedStyleを利用して取得するが、この場合得られる値は何が何でもpx換算されてしまう。

仮にemで指定した場合、ブラウザのフォント設定によって結果が変わってしまう。ブラウザ側で18pxと設定してCSSに1emと記述した場合、1em=1文字の大きさ=設定された18pxとなり、18pxが返ってくる。

ブラウザ側でCtrl++でフォントを大きくした場合でもしっかり対応してくれるので、使いようによっては便利かもしれない。上記の例なら、2回フォントを大きくしてから取得すれば、しっかり50%増しの27pxが返ってくる。試していないが、モニタ解像度を96dpiから72dpiに変えたりすれば、pt指定の値も変化するものと思われる。

なお、OperaはgetComputedStyleでもcurrentStyleでも両方イケるので、記述した値をまんま取得したいならcurrentStyleで取得するべきだ。

getComputedStyleで取得する場合、OperaはFirefoxと違ってブラウザ側のフォントサイズ変更には追従してくれないので注意。300%まで拡大してもデフォルトサイズが返ってくる。

それと、OperaのgetPropertyValueはFirefoxと違い、一括指定したプロパティでもIE同様に取得することができる。

#hoge { margin : 1em }

getActiveStyle( $( "hoge" ), "margin" );
//IE : 1em
//Firefox : null
//Opera(currentStyle) : 1em
//Opera(getPropertyValue) : 16px

軽くまとめる

IE: －セレクタ毎に分割登録される; × 擬似要素（:visited等）が取得できない; × 全称セレクタが削除されて登録される
Firefox: －セレクタ毎に分割登録されない; ○ ブラウザに忠実なpxサイズ取得; △ プロパティの自動補完; × 一括指定セレクタで取得できない
Opera: －セレクタ毎に分割登録されない; ○ IE/Firefox両方の方法で取得できる