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

JavaScriptでHTML要素を非表示にする方法【visibilityプロパティの使い方】

JavaScriptでHTML要素を非表示にするには、visibilityプロパティを使用します。値をhiddenに設定すれば要素が画面上から隠れ、visibleに戻せば再び表示されます。

以下のサンプルコードを実行して、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>

コードのポイント

  • document.getElementById(): 指定したIDのHTML要素を取得します。
  • style.visibility = "hidden": 要素を非表示にします。
  • style.visibility = "visible": 非表示の要素を再び表示します。

visibilityとdisplay:noneの違い

要素を非表示にする方法としては、display: noneもよく使われますが、両者には重要な違いがあります。visibility: hiddenの場合、要素は見えなくなってもレイアウト上のスペースが保持されるため、ページの構造が崩れません。一方、display: noneは要素が存在しないかのように扱われ、占めていたスペースも消えます。

レイアウトを維持したまま要素だけを隠したい場合はvisibilityプロパティを、要素ごと完全に削除したい場合はdisplayプロパティを使うなど、用途に応じて使い分けるのがおすすめです。

  1. JavaScriptとCSSでドラッグ可能なHTML要素を作成する方法

    JavaScriptとCSSを組み合わせることで、マウスで掴んで自由に移動できる「ドラッグ可能なHTML要素」を簡単に実装できます。本記事では、実際に動作するサンプルコードと、その内部処理の仕組みをわかりやすく解説します。 ドラッグ可能なDIV要素のサンプルコード 以下のコードでは、position: absoluteで配置したDIV要素に対して、マウスイベント（mousedown・mousemove・mouseup）を利用してドラッグ機能を実装しています。 <!DOCTYPE html> <html> <style> body {

  2. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in