JavaScript の非表示ボタン

1. Visibility プロパティを使用して JavaScript でボタンを非表示にする
2. Display プロパティを使用して JavaScript でボタンを非表示にする

今日の投稿では、JavaScript でボタンを非表示にする方法について学びます。

Visibility プロパティを使用して JavaScript でボタンを非表示にする

CSS プロパティ visibility は、ドキュメントのレイアウトに影響を与えずに要素を表示または非表示にします。

構文：

visibility: hidden;

要素ボックスは非表示ですが、通常どおりレイアウトに影響します。 可視性が visible に設定されている場合、要素の子孫は可視です。

要素に hidden 可視性値を使用すると、アクセシビリティ ツリーから要素が削除されます。 その結果、スクリーン リーダー テクノロジは、要素とそのすべての子要素を通知しなくなりました。

可視性の値は、visible と invisible の間で切り替えられます。 したがって、開始値または終了値のいずれかが表示されている必要があります。そうでないと、補間を実行できません。

値は離散ステップとして補間され、0 ～ 1 の時間関数値を可視エンドポイントに割り当て、その他の時間関数値を最も近いエンドポイントに割り当てます。

プロパティの詳細については、Visibility ドキュメントを参照してください。

visibility プロパティを使用して JavaScript でボタンを表示および非表示にする例を見てみましょう。

<input type="button" id="btn-1" value="Show" onClick="hideAction()" />
<input type="button" id="btn-2" value="Hide" onClick="hideAction()"/>

let hidden = false;

function hideAction() {
  hidden = !hidden;
  if (hidden) {
    document.getElementById('btn-1').style.visibility = 'hidden';
  } else {
    document.getElementById('btn-1').style.visibility = 'visible';
  }
}

上記の例では、2つのボタンを定義しています。 最初のボタンは、トグル ボタンの値に基づいて表示および非表示になります。

2 番目のボタンは、前のボタンの可視性を切り替えます。

JavaScript をサポートするブラウザーで上記のコード スニペットを実行します。 以下の結果が表示されます。

出力：

ボタンを隠す:

Display プロパティを使用して JavaScript でボタンを非表示にする

CSS の display プロパティは、要素がブロックまたはインライン要素として扱われるかどうか、およびその子要素に使用されるレイアウト (B. Flow、Grid、または Flex レイアウトなど) を決定します。

構文：

display: block;
display: none;

Display プロパティは、要素の内部と外部の表示タイプを指定します。 外部タイプは、要素がフロー レイアウトに参加するかどうかを決定します。 インナータイプはお子様のデザインを設定。

一部の表示値は、仕様で完全に定義されています。 たとえば、display: flex が宣言されたときに何が起こるかは、CSS flexbox モデル仕様で定義されています。

プロパティの詳細については、Display ドキュメントを参照してください。

display プロパティを使用して、JavaScript でボタンを表示および非表示にする例を見てみましょう。

<input type="button" id="btn-3" value="Show" onClick="displayAction()" />
<input type="button" id="btn-4" value="Toggle" onClick="displayAction()"/>

function displayAction() {
  hidden = !hidden;
  if (hidden) {
    document.getElementById('btn-3').style.display = 'none';
  } else {
    document.getElementById('btn-3').style.display = 'block';
  }
}

上記の例では、2つのボタンを定義しています。 最初のボタンは、トグル ボタンの値に基づいて表示および非表示になります。

2 番目のボタンは、前のボタンの display プロパティを切り替えます。

JavaScript をサポートするブラウザーで上記のコード スニペットを実行します。 以下の結果が表示されます。

出力：

デモはこちら