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

JavaScriptで要素の表示・非表示を切り替える方法【visibilityプロパティ】

JavaScriptで要素を表示したり非表示にしたりするには、CSSのvisibilityプロパティを使用します。このプロパティを使うことで、ページのレイアウトを崩すことなく、要素の見た目だけを動的に切り替えることができます。

visibilityプロパティの基本

visibilityプロパティには、主に以下の値を指定できます。

  • visible： 要素を通常どおり表示します。
  • hidden： 要素を非表示にします。ただし、要素が占めていたスペースはそのまま維持される点に注意してください。

似たような目的で使われるdisplay: none;との違いは、displayの場合は要素が占めるスペースごと完全に消えるという点です。「スペースを確保したまま内容だけ隠したい」場合はvisibilityが適しています。

サンプルコード

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

<!DOCTYPE html>
<html>
   <body>
      <p id = "pid">Demo Text</p>
      <button type = "button" onclick = "displayHide()"> Hide </button>
      <button type = "button" onclick = "displayShow()"> Show </button>
      <script>
         function displayHide() {
           document.getElementById("pid").style.visibility = "hidden";
         }

         function displayShow() {
           document.getElementById("pid").style.visibility = "visible";
         }
      </script>
   </body>
</html>

コードのポイント

document.getElementById()で対象となる要素を取得し、そのstyle.visibilityに"hidden"または"visible"を代入するだけで、ボタンのクリックに応じて表示状態を自由に制御できます。シンプルながら実用的なテクニックなので、メニューやツールチップなどのUI実装にも応用できます。

  1. JavaScriptで要素の上マージンを設定する方法（marginTopプロパティの使い方）

    JavaScriptで要素の上マージン（トップマージン）を設定するには、marginTop プロパティを使用します。document.getElementById() などで対象の要素を取得し、style.marginTop に「150px」のような値を文字列で代入するだけで、動的に上マージンを変更できます。 サンプルコード 以下のコードでは、ボタンをクリックすると id「myID」が設定された div 要素に上マージン150pxが追加されます。実際に実行して動作を確認してみてください。 <!DOCTYPE html> <html>    <h

  2. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE