display: none[..]、Prototype では、要素が非インライン CSS で非表示 ( ) と宣言されている場合、要素を表示に切り替えることはできません。これは私が理解していないことであり、常にイライラしています。それについての洞察を提供できる人なら誰でも、私から大きな支持を得ます.
おそらくすでにこれを見たことがあるでしょうが、例のドキュメントshow(同じメモを持つ他の関連する関数があります) は次のように述べています。
Element.show CSS スタイルシートで非表示になっている要素は表示できません。これはプロトタイプの制限ではなく、CSSdisplayプロパティの動作の結果であることに注意してください。
つまり、これは既知の問題であり、彼らは CSS を非難しています。ただし、次のドキュメントを検討してください (私は以前に Prototype を使用したことがないため、これが DOM のロードを待つための推奨される方法であるかどうかはわかりませんが、動作しているようです):
<!doctype html>
<script src="prototype.js"></script>
<script>
document.observe("dom:loaded", function() {
$("victim").show();
});
</script>
<style>
p#victim {display:none;}
</style>
<p id="victim">Hello world!
ご存知のように、これは機能しません。なんで？displayでは、Prototype は、自分自身にプロパティを「リセット」する方法をどのように認識しp#victimますshowか? (言い換えると、セレクターを使用してルールセットに が存在しなかったdisplay場合、値が何であるべきかをどのように見つけることができますか。) 答えは簡単です: できません。(ちょっと考えてみてください。ルールセットにセレクターが存在しない場合、別のルールセットが の値を変更したらどうなるでしょうか? (つまり、常に を設定する必要があるなどと仮定することはできません。他のルールセットは変更されている可能性があります。その値です。) を削除することはできません。display: nonep#victimdisplaydisplay: nonep#victimpblockdisplayスタイルシートのルールセットからプロパティを削除します。要素とルールセットの間の接続全体を削除することはできません。これは、他のプロパティなどが含まれている可能性があるためです(可能であっても、私見では明らかではありません)これを行うルールセットを見つけます)。もちろん、これを続けることもできますが、この問題に対する既知の解決策はありません。)
では、なぜインラインの代替が機能するのでしょうか? まず、 がどのようshowに実装されているかを見てみましょう。
show: function(element) {
element = $(element);
element.style.display = ''; // <-- the important line
return element;
}
この関数が行う唯一の重要なことは、から「削除」element.style.displayする空の文字列 ( ) に設定することです。すごい！しかし、それはどういう意味ですか？なぜそれを削除したいのですか?! まず、値を変更するときに実際に何を表し、変更するのかを見つけなければなりません。''displaystyleelement.style
MDC のドキュメントには、次のようにelement.style記載されています。
style要素の属性を表すオブジェクトを返します。
最後の単語attribute に注意してください。element.style≠ 要素の現在の「計算された」スタイルです。これは、style属性内のプロパティの単なるリストです (より長い/より良い説明については、MDC を参照してください)。
次のドキュメントを検討してください。
<!doctype html>
<script src="prototype.js"></script>
<script>
document.observe("dom:loaded", function() {
$("victim").show();
});
</script>
<p id="victim" style="display:none;">Hello world!
style="display:none;"非表示p#victimになりますが、DOM が読み込みを終了すると Prototype はそれを に変更し、ブラウザーはプロパティの値 (この場合はブラウザーの既定のスタイル シートのstyle=""値) を再計算します。display
ただし、次のドキュメントを検討してください。
<!doctype html>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#victim").show();
});
</script>
<style>
p#victim {display:none;}
</style>
<p id="victim">Hello world!
とにかく、jQuery はスタイル シートを正しく処理します。これは、プロトタイプ ソリューションほど簡単に説明することはできません。また、今読んでおくべき層がたくさんあります。また、jQuery が の正しい値を計算できない場合も数多くありますdisplay。(最後のメモ: Firebug ...、しかし、Firefox 専用のものか何かを使用していると思います。)