prototype.jsのsetStyleで指定するcssプロパティ名にはハイフンを含めてはいけない

恥ずかしながらjQueryJavaScriptばかり触ってきたので、prototype.jsにおいては基本であると思われるところでハマってしまったのでメモしておく。

prototype.jsのsetStyleで指定するcssプロパティ名にハイフンを含めると、FireFoxにおいてスタイルが反映されない。

たとえば、background-colorを設定する場合、以下のように指定するとFireFoxには反映されない。

$('hoge').setStyle({ 'background-color': '#000000' });

ではどうするか。こうする。

$('hoge').setStyle({ 'backgroundColor': '#000000' });


ついでにjQueryではどうなるか実験してみたところ、FireFoxでもハイフン付きで問題なく反映された。

$('#hoge').css({ 'background-color': '#000000' });


ブラウザー間の微妙な動作の違いにはいつも悩まされる。