0

ユーザーがボタンを押したときに後で表示されるように、要素を非表示にしています。

これを .html の head タグに入れました。

<script>document.getElementById("answerPanel").style.display = "none";</script>

次に、関数が .js で呼び出されると:

document.getElementById("answerPanel").style.display = "";

このメソッドは、ページの読み込み時に要素の短いフラッシュを引き起こしますか? これを（ほぼ）簡単に行うためのはるかに良い方法はありますか？

バニラ JavaScript をしっかりと理解するまでは、jQuery の使用を避けようとしていることにご注意ください。

4

3 に答える 3

1

最初は css で非表示にします:

#answerPanel { display: none; }

そして、JS を使用してオンデマンドで表示します。

document.getElementById('answerPanel').style.display = 'block';
于 2013-11-05T16:41:16.243 に答える
1

要素が最初からまったく表示されないようにしたい場合は、要素のスタイルを JavaScript ではなく HTML で設定する必要があります。これにより、JavaScript ファイルや CSS ファイルなどの他のリソースへのリクエストが遅延した場合でも、要素が非表示になります。

JavaScript のインライン化が解決策になる可能性があり、この場合は問題ありませんが、より複雑な状況で使用しようとすると、最初のページの読み込みが遅れるレイアウトの破損のリスクが発生する可能性があります。私はそれをお勧めしません。

HTML:

<div id="test" style="display:none"> </div>
<button onclick='show()'>Show!</button>

CSS (オプション):

#test {
  width:100px;
  height:100px;
  background-color:red;
}

JS:

function show() {  
  document.getElementById('test').style.display = '';
}

デモ: http://jsbin.com/oYiDEJU/2/edit

編集: このソリューション (インライン スタイル) を使用すると、CSS から表示値を簡単に変更できます。

#test {
  display:inline;
}

それを非表示にして表示すると、'inline'値を保持し、 でオーバーライドしません'block'。私が話している問題は、リンクされた JsBin で確認できます。

于 2013-11-05T16:44:49.463 に答える
0

「フラッシュ」を回避したい場合は、ブラウザがすでに非表示になっている要素をロードするのが最善です。

<div id="answerPanel" style="display: none">
</div>
于 2013-11-05T16:41:25.300 に答える