Happy Programming

ページ上でいろいろとjavascriptを実行するとHTML（DOM）の状態がどんどん変わっていくが通常のブラウザの"ソースを表示"では当然それらは反映されていない。
これはもちろんサーバからブラウザにドキュメントが届いた時点でのソースなので当然といえば当然なのだが"今どんな状態なのか"を確認したいときもある。
こんなときもFirebugならリアルタイムで確認できる。

Prototype.jsで、スタイルのプロパティ操作のメソッド（"getStyle","setStyle"）を使ってあれこれいじってみた。
まずは"getStyle"だがこのメソッドは要素オブジェクトのメソッドとして呼び出す。
引数はCSSのプロパティ名を指定するがここでの指定の仕方はCSSの記法とDOMの記法のどちらでもOKという事らしい。
例えばフォントのサイズを知りたい場合（ここではスタイルの設定はしていない）は

$('div1').getStyle('font-color');

でも

$('div1').getStyle('fontColor');

でもいいという事だ。
通常はjavascriptからスタイルをいじるときはキャメル形式（'fontColor'みたいな）を使わなければいけないことになっているがPrototype.jsで拡張されているという事だろう。

次にスタイルを設定する"setStyle"だがこちらは"何処"に"何"を設定するか?なので引数が1つ増えるかと思いきや実際は1つの文字列か1つのオブジェクト（ハッシュ）を指定する。
ちょっとややこしいが文字列の時は

$('div1').setStyle('font-color: 12px');

のようにHTMLのstyle属性と同じような書き方をする。
もう一つハッシュを使った時は

$('div1').setStyle({fontColor: '12px'});

となる、この場合プロパティ名はキャメル形式にしなければいけないらしい（Ver 1.6から）。
1度に複数のスタイルを設定する事も出来る。それぞれ書き方は

$('div1').setStyle('font-color: 12px; background-color: #AAA');
$('div1').setStyle({fontColor: '12px', backgroundColor: '#AAA'});

となる。

それぞれコンソールから

$('div1').getStyle('font-color');

と実行してみるとsafari、Firefox、Operaとも"16px"と表示される。IEはコンソールみたいなのがあるのかよく分からないのでスクリプトを埋め込んで実行したら"12pt"だった。

そういえばMac版のFirefoxってたしかデフォルトの文字サイズが他より小さかったと思ったがいつの間に同じになったんだろ？