JavaScript で style.display 属性を使用する方法-jsチュートリアル-php.cn

JavaScript で style.display 属性を使用する方法

不言

リリース： 2019-01-07 14:45:27

オリジナル

16791 人が閲覧しました

style.display プロパティは、要素のスタイルを自由に変更するために使用される、Style オブジェクトの表示プロパティです。たとえば、要素の高さと幅、色と背景などのさまざまなスタイルを追加できます。

JavaScript で style.display 属性を使用する方法

#display 属性を見てみましょう

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 番目のボタンは、画像を再度表示するための表示ボタンです。

JavaScript で style.display 属性を使用する方法

「非表示」ボタンのonclick属性に非表示機能を指定しています。

hide 関数は、まず getElementById メソッドを使用して画像要素を取得します。

image 要素を取得した後、要素の style.display 属性にアクセスし、文字列 none を指定します。

値を none に置き換えることで要素を非表示にできます。

非表示ボタンをクリックして画像を非表示にします。

JavaScript で style.display 属性を使用する方法

非表示ボタンをクリックすると画像が消去され、ボタンの位置が上がります。

代わりに、「表示」ボタンをクリックすると、画像が再表示されます。

表示ボタンのonclick属性にshow関数を指定しています。

hide 関数と同様に、show 関数は、getElementById メソッドを使用して画像要素を取得した後、style.display 属性にアクセスします。

すると、こうすることで文字列ブロックの代わりに画像ブロックが表示され、再度画像が表示されます。

JavaScript で style.display 属性を使用する方法

#表示と可視性の違いは何ですか?

上記のサンプルコードでは、スタイルオブジェクトの表示プロパティを使用して、画像の表示設定を変更します。

ただし、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 属性を使用して非表示になります。

JavaScript で style.display 属性を使用する方法 #2 番目のボタンの onclick 属性に Hide2 関数を指定します。