ホームページ > 記事 > ウェブフロントエンド > JavaScript で style.display 属性を使用する方法
JavaScript で style.display 属性を使用する方法
- 不言オリジナル
- 2019-01-07 14:45:2716726ブラウズ
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>上記のコードで style.display プロパティを使用して、画像を表示または非表示にします。 まず、imgタグを使用して画像を表示し、画像の下にボタンを2つ作成します。 最初のボタンは、画像を非表示にする [非表示] ボタンです。 2 番目のボタンは、画像を再度表示するための表示ボタンです。
#表示と可視性の違いは何ですか?
上記のサンプル コードでは、スタイル オブジェクトの表示プロパティを使用して、画像の表示設定を変更します。 ただし、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 つのボタンを作成しました。 1 つ目は [表示で非表示] ボタンで、前と同じ表示属性を使用します。 2 番目のボタンは [Hide with VISIBILITY] ボタンで、visibility 属性を使用して非表示になります。
#2 番目のボタンの onclick 属性に Hide2 関数を指定します。
hide2 関数は、getElementById メソッドを使用して画像要素を取得し、style.visibility 属性にアクセスします。
次に、非表示の文字列を置き換えて画像を非表示にします。
前述したように、ボタンをクリックすると画像が消え、画像の下のボタンが表示されます。
ただし、visibilityのクリックボタンを使用すると、画像のある部分だけが空白になり、スペースが残ります。
#ボタンは元の位置に残り、画像の位置は空白で、スペースが保持されていることがはっきりとわかります。
以上がJavaScript で style.display 属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。