みなさまこんにちは、加賀田です。本日は表題そのまま、Prototype.jsとjQueryそれぞれにおけるshow()の挙動の違いについてご紹介いたします。
例えば、HTMLソースコード中に次のような要素が存在したとします。
<p id="example">example</p>
この要素をJavaScriptで非表示の状態に切り換える場合、例えば次のような記述をすることになります。
document.getElementById('example').style.display = 'none';
また、jQueryのもとでは次のようにすることもできます。
$('#example').hide();
スマートですね。ここで、$(‘#hoge’)がdocument.getElementById(‘example’)に、またhide()がstyle.display = ‘none’にそれぞれ相当します。
そして後者のhide()は、Prototype.jsにも同様の機能が同名で用意されています。Prototype.jsのもとでの記述は次のとおり。
$('example').hide();
$()の仕様が若干違って、ID名に#がつきません。
これを踏まえて。hide()とは逆に非表示の要素を表示させるshow()というメソッドもそれぞれ存在しています。
例えば、先述のHTMLに次のようなCSSをあてます。
#example{
display:none;
}
これにより、デフォルトで先のp要素は非表示となります。
これを表示状態に切り換えるには、jQueryのもとでは次のように記述します。
$('#example').show();
ではPrototype.jsなら、次のコードを実行すれば良さそうですが…
$('example').show();
実際には、これによって先の要素を表示させることはできません。
最初にこれで詰まった際、原因が分からなくていろいろ情報を求めたところ夜の Discovery さんにリファレンスへのリンクつきで解説がありました。そうか最初にリファレンスを見るべきでした…。
Prototype.jsのリファレンスには次のような記述がみられます。
Element.show cannot display elements hidden via CSS stylesheets. Note that this is not a Prototype limitation but a consequence of how the CSS display property works.
CSSで非表示にした要素をshow()で表示状態に切り換えることはできないとのことです。つまり、Prototype.jsにおけるshow()は専らhide()で隠した要素を表示させる場合に使用するものということになります。
ちなみに、jQueryのリファレンスではshow()について次のように述べられています。
It doesn’t matter if the element is hidden via a hide() call, or via a display:none in a stylesheet.
Prototype.jsのshow()にあるような制限は設けていないということですね。
Prototype.jsが上記のような制限を設けている理由として、ひとつにはアクセシビリティの問題があろうと思われます。CSSで非表示とした要素をJavaScriptで表示するようにしてしまうと、JavaScriptが無効な環境においてこの要素を見ることができなくなってしまいます。そこで、要素を非表示にする処理もJavaScriptで行うよう制限してやれば、JavaScript無効環境では表示されっぱなしになり、そうした事態には陥らずに済みます。
なお、CSSで非表示の要素をPrototype.jsのもとでむりやり表示させるには、次のような記述をします。
$('example').setStyle('display:block');
より明示的にCSSを変更してしまうコードですね。先述のようなアクセシビリティ上の問題からこうした実装は避けたいところですが、場面によっては有効なこともあるかもしれません。
