style.display プロパティは、要素のスタイルを自由に変更するために使用される、Style オブジェクトの表示プロパティです。たとえば、要素の高さと幅、色と背景などのさまざまなスタイルを追加できます。
#display 属性を見てみましょう
style.display属性の基本的な使い方
次のようにコードを見てみましょう<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <img id="style1" src="img/girl.jpg" style="max-width:90%" style="max-width:90%" alt="JavaScript で style.display 属性を使用する方法" > <br> <input type="button" value="Hide" onclick="hide();"/> <br> <input type="button" value="Show" onclick="show();"/> </body> <script> function hide() { var e = document.getElementById("style1"); e.style.display = "none"; } function show(){ var e = document.getElementById("style1"); e.style.display = "block"; } </script> </html>
#表示と可視性の違いは何ですか?
上記のサンプル コードでは、スタイル オブジェクトの表示プロパティを使用して、画像の表示設定を変更します。 ただし、display 属性に加えて、visibility 属性を使用して画像を表示または非表示にすることもできます。 コードは次のとおりです<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <img id="drag1" src="img/flowers.jpg" style="max-width:90%" style="max-width:90%" alt="JavaScript で style.display 属性を使用する方法" > <br> <input type="button" value="Hide with DISPLAY" onclick="hide1();"/> <br> <input type="button" value="Hide with VISIBILITY" onclick="hide2();"/> </body> <script> function hide1() { var e = document.getElementById("drag1"); e.style.display = "none"; } function hide2() { var e = document.getElementById("drag1"); e.style.visibility = "hidden"; } </script> </html>
#2 番目のボタンの onclick 属性に Hide2 関数を指定します。
hide2 関数は、getElementById メソッドを使用して画像要素を取得し、style.visibility 属性にアクセスします。
次に、非表示の文字列を置き換えて画像を非表示にします。
前述したように、ボタンをクリックすると画像が消え、画像の下のボタンが表示されます。
ただし、visibilityのクリックボタンを使用すると、画像のある部分だけが空白になり、スペースが残ります。
#ボタンは元の位置に残り、画像の位置は空白で、スペースが保持されていることがはっきりとわかります。
以上がJavaScript で style.display 属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。