JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHTML要素を表示する方法！visibilityプロパティの使い方を解説

JavaScriptでHTML要素を表示したい場合は、CSSのvisibilityプロパティを利用します。このプロパティの値をvisibleに設定すれば要素は画面に表示され、hiddenに設定すれば非表示にできます。

visibilityプロパティとは

visibilityプロパティは、要素の「表示・非表示」を切り替えるためのCSSプロパティです。JavaScriptからは、document.getElementById()などで取得した要素のstyle.visibilityに値を代入することで動的に制御できます。

  • visible：要素を通常どおり表示する（初期値）
  • hidden：要素を非表示にする（ただしレイアウト上のスペースは保持される）

サンプルコード

以下のコードでは、「Hide」ボタンをクリックするとテキストが非表示になり、「Show」ボタンをクリックすると再び表示されます。実際にブラウザで実行して、visibilityプロパティの動きを確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <p id="pid">デモ用テキスト</p>
      <button type="button" onclick="displayHide()"> 非表示 </button>
      <button type="button" onclick="displayShow()"> 表示 </button>
      <script>
         function displayHide() {
            document.getElementById("pid").style.visibility = "hidden";
         }
         function displayShow() {
            document.getElementById("pid").style.visibility = "visible";
         }
      </script>
   </body>
</html>

コードのポイント解説

1. 要素の取得とスタイル変更

document.getElementById("pid")でIDが「pid」の段落要素を取得し、そのstyle.visibilityプロパティに直接値を設定しています。

2. ボタンのonclickイベント

<button>要素のonclick属性に関数を指定することで、クリックされたタイミングでdisplayHide()やdisplayShow()が呼び出され、表示状態が切り替わります。

注意点：display:noneとの違い

似たような用途で使われるdisplay: noneとの違いにも注目しましょう。visibility: hiddenの場合、要素は見えなくなりますが、元々占めていたスペースは残ります。一方、display: noneでは要素ごとレイアウトから取り除かれるため、周囲の要素が詰めて表示されます。「レイアウトを崩したくない場合」はvisibilityプロパティが適しています。

  1. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">  

  2. CSSでホバー時に要素を表示する方法【サンプルコード付き】

    CSSでマウスホバー時に非表示の要素を表示するには、:hover 疑似クラスと隣接兄弟セレクタ（+）を組み合わせるのが一般的です。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <style>    body{       margin:20px;       padding:20px;       font-family: 'Segoe UI', Tahoma,