ホームページ >ウェブフロントエンド >htmlチュートリアル >表示または可視性を通じて HTML 要素を表示および非表示にする方法
今回はdisplayやvisibilityを使ってHTML要素を表示、非表示にする方法を紹介します。戦闘の場合を見てみましょう。 場合によっては、Web ページ内の HTML 要素を特定の条件に基づいて表示するか非表示にするかを制御する必要があります。これは、表示または可視性によって実現できます。次の例を通じて、表示と可視性の違いを学びましょう。簡単なコード例は次のとおりです。
<html> <head> <title>HTML元素的显示与隐藏控制</title> <script type="text/javascript"> function showAndHidden1(){ var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); if(div1.style.display=='block') div1.style.display='none'; else div1.style.display='block'; if(div2.style.display=='block') div2.style.display='none'; else div2.style.display='block'; } function showAndHidden2(){ var div3=document.getElementById("div3"); var div4=document.getElementById("div4"); if(div3.style.visibility=='visible') div3.style.visibility='hidden'; else div3.style.visibility='visible'; if(div4.style.visibility=='visible') div4.style.visibility='hidden'; else div4.style.visibility='visible'; } </script> </head> <body> <div>display:元素的位置不被占用</div> <div id="div1" style="display:block;">DIV 1</div> <div id="div2" style="display:none;">DIV 2</div> <input type="button" onclick="showAndHidden1();" value="DIV切换" /> <hr> <div>visibility:元素的位置仍被占用</div> <div id="div3" style="visibility:visible;">DIV 3</div> <div id="div4" style="visibility:hidden;">DIV 4</div> <input type="button" onclick="showAndHidden2();" value="DIV切换" /> </body> </html>
関連書籍:
HTML での複数のクラス属性の定義は無効です HTML でファイルを非同期にアップロードする方法以上が表示または可視性を通じて HTML 要素を表示および非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。