ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript で style.display 属性を使用する方法

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

不言
リリース: 2019-01-07 14:45:27
オリジナル
16776 人が閲覧しました

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 関数を指定します。

hide2 関数は、getElementById メソッドを使用して画像要素を取得し、style.visibility 属性にアクセスします。

次に、非表示の文字列を置き換えて画像を非表示にします。

前述したように、ボタンをクリックすると画像が消え、画像の下のボタンが表示されます。

ただし、visibilityのクリックボタンを使用すると、画像のある部分だけが空白になり、スペースが残ります。

JavaScript で style.display 属性を使用する方法#ボタンは元の位置に残り、画像の位置は空白で、スペースが保持されていることがはっきりとわかります。

以上がJavaScript で style.display 属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート