HTML 非表示ショー

HTML の非表示と表示

HTML コードでは、特定の要素を非表示にしたり表示したりする必要がある場合があります。この記事では、HTML で要素を表示および非表示にするいくつかの方法について説明します。

1. display 属性を使用する

display 属性は、要素の表示モードを指定するために使用されます。次のオプションの値があります:

• none : 要素は表示されず、スペースも占有しません。
• block: 要素はブロック レベルで表示され、前後に改行が入ります。
• inline: 要素は前後に改行なしでインラインで表示されます。
• inline-block: 要素はインライン ブロック レベルで表示され、前後に改行はありませんが、幅や高さなどの属性を設定できます。

display 属性を設定することで、要素を非表示にしたり表示したりできます。

<div id="myDiv" style="display: none;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.display='block'">显示</button>
<button onclick="document.getElementById('myDiv').style.display='none'">隐藏</button>

上記のコードでは、まず、style 属性を通じて div 要素の display 属性を none に設定します。つまり、要素を非表示にします。次に、2 つのボタン要素の onclick イベントと JavaScript によってボタンのクリック操作が実装され、要素の表示状態が変更されます。

2. 可視性属性を使用する

可視性属性は、要素の可視性を指定するために使用されます。次のオプションの値があります:

• visible: 要素は表示されます。
• hidden: 要素は表示されませんが、それでもスペースを占有します。

visibility 属性を設定することで、要素を非表示にしたり表示したりすることができます。

<div id="myDiv" style="visibility: hidden;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.visibility='visible'">显示</button>
<button onclick="document.getElementById('myDiv').style.visibility='hidden'">隐藏</button>

上記のコードでは、まず、スタイルを通じて div 要素の Visibility 属性を非表示に設定します。属性、つまり要素を非表示にします。次に、2 つのボタン要素の onclick イベントと JavaScript によってボタンのクリック操作が実装され、要素の表示状態が変更されます。

3. 不透明度属性を使用する

不透明度属性は要素の透明度を指定するために使用されます。値の範囲は 0 ～ 1 で、0 は完全に透明、1 は完全に透明であることを意味します。不透明という意味です。 opacity 属性を設定することで、要素のフェードアウトおよびフェードアウト効果を実現できます。

<div id="myDiv" style="opacity: 0;">这是一个被隐藏的 div。</div>
<button onclick="show()">显示</button>
<button onclick="hide()">隐藏</button>

<script>
  function show() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 1;
    div.style.transition = "opacity 1s";
  }
  
  function hide() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 0;
    div.style.transition = "opacity 1s";
  }
</script>

上記のコードでは、次のようにして div 要素のフェードアウトおよびフェードアウト効果を実現します。 div要素の不透明度属性と遷移属性を設定します。ボタンをクリックすると、JavaScript を介して div 要素の不透明度属性を対応する値 (0 または 1) に設定し、次に遷移属性を対応する時間に設定して、フェードおよびフェード効果を実現します。

概要

上記の 3 つの方法はすべて、HTML 要素を非表示にしたり表示したりする効果を実現できますが、状況によっては異なる効果が生じる可能性があります。特定のニーズやシナリオに応じて適切な方法を選択する必要があります。

以上がHTML 非表示ショーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。