【JavaScript】HTMLタグの表示/非表示を切り替えるDOM操作 | hidden / display: none;

HTML-Tag-hide

SHARE

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、HTMLタグの非表示方法と表示/非表示を切り替えるDOM操作について解説していきます。

結論から言うと、HTMLタグの非表示はhidden属性か「display: none;」のStyleの適用のどちらかで実装します。

また、表示/非表示の切り替えは、JavaScriptのDOM操作で実施します。

HTMLタグを非表示にする方法1: HTML-Tag に hidden を追加する

hidden属性の使い方は、シンプルでHTMLタグに「hidden」属性を追加するだけです。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Robotama-Hide🔥</title>
</head>
<body>
  
    <h2>1. HTML-Tag に hidden を追加する</h2>
    <h3 hidden>Ninjya-Robotama🔥</h3>
    <p>HTMLタグに「 hidden 」属性を追加するだけで、画面上は非表示になります。</p>

</body>
</html>

HTMLタグを非表示にする方法2: 「display: none;」を適用する

CSS の Style として「 display: none; 」を設定してあげると、画面上は非表示になります。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Robotama-Hide🔥</title>
    <style>
        h3.robotama-1 {
            display: none;
        }
    </style>
</head>
<body>
  
    <h2>2. display: none を使用する</h2>
    <h3 class="robotama-1" >Display-None-Robotama🔥</h3>
    <p>CSS の Style として「 display: none; 」を設定してあげると、画面上は非表示になります。</p>

</body>
</html>

hidden属性の注意点

hidden属性は「display: block;」や「display: inline-block;」などのStyleが適用されたときに無効化されるという弱点があります。

なので、hidden属性を使用するときは、それらのStyle適用に気をつける必要があります。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Robotama-Hide🔥</title>
    <style>
        .appear-robotama {
            display: block;
        }
    </style>
</head>
<body>
  
    <h2>3. hidden-属性の注意点</h2>
    <h4 class="appear-robotama" hidden >hidden-属性を追加したのに表示されているだと・・・</h4>
    <p>
        hidden-属性は、とても弱い存在です。
        <br>
        要素に強いセレクタを使用して none 以外の値(block, inline-blockなど)を定義すると、簡単に上書きされます。
    </p>

</body>
</html>

hidden-属性の「表示/非表示」切り替えDOM操作のSample-Code

HTMLElement の hidden プロパティは論理値で、この要素が非表示の場合は true で、それ以外の場合は false です。

「HTMLElement.hidden」の形でhidden属性の真偽値を取得できるので、それを元にDOM操作で表示/非表示の切り替えを実装することができます。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Robotama-Hide🔥</title>
    <script>
        function HiddenSwitch (elem) {
            console.log('HiddenSwitch-起動🔥');

            // 1. id で要素を取得する
            const element = document.getElementById(elem);
            console.log({element});

            // 2. HTMLElement の hidden プロパティは論理値で、この要素が非表示の場合は true で、それ以外の場合は false です。 
            const hiddenFlag = element.hidden;
            console.log({hiddenFlag});

            if (hiddenFlag) {
                element.hidden = false;
            } else {
                element.hidden = true;
            }
        }
    </script>
</head>
<body>
  
    <h2>4. hidden-属性の「表示/非表示」-Switch-Sample</h2>
    <h3 id="robotama" hidden >ロボ玉なのだ🔥</h3>
    <button type="button" onclick="HiddenSwitch('robotama')">ロボ玉-表示/非表示</button>

</body>
</html>

display: none の「表示/非表示」切り替えDOM操作のSample-Code

「display: none;」を適用して非表示にしている場合もDOM操作で表示/非表示の切り替えができます。

getComputedStyle(HTMLElement) で Styleの適用状況を知ることができるので、

getComputedStyle(element).display で displayの適用状況を確認して、Switch操作をしています。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Robotama-Hide🔥</title>
    <style>
        #gunma {
            display: none;
        }
    </style>
    <script>
        function DisplayNoneSwitch (elem) {
            console.log('DisplayNoneSwitch-起動🔥');

            // 1. id で要素を取得する
            const element = document.getElementById(elem);
            console.log({element});

            // 2. getComputedStyle() => Style の適用状況を知ることができる
            const displayStyle = getComputedStyle(element).display;
            console.log({displayStyle});

            // 3. Style を Switch するための条件文
            if (displayStyle == 'none') {
                
                // 4. HTML-Tag の Style は「 HTMLElement.style.属性名 = '値' 」の形でupdateできる
                element.style.display = 'block';
            } else {
                element.style.display = 'none';
            }

        }
    </script>
</head>
<body>
  
    <h2>5. display: none の「表示/非表示」-Switch-Sample</h2>
    <h3 id="gunma" >神聖グンマー帝国、万歳🔥</h3>
    <button type="button" onclick="DisplayNoneSwitch('gunma')">神聖グンマー帝国-表示/非表示</button>

</body>
</html>

今回のSample-Code-全文

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Robotama-Hide🔥</title>
    <style>
        h3.robotama-1 {
            display: none;
        }
        .appear-robotama {
            display: block;
        }
        #gunma {
            display: none;
        }
    </style>
    <script>
        function HiddenSwitch (elem) {
            console.log('HiddenSwitch-起動🔥');

            // 1. id で要素を取得する
            const element = document.getElementById(elem);
            console.log({element});

            // 2. HTMLElement の hidden プロパティは論理値で、この要素が非表示の場合は true で、それ以外の場合は false です。 
            const hiddenFlag = element.hidden;
            console.log({hiddenFlag});

            if (hiddenFlag) {
                element.hidden = false;
            } else {
                element.hidden = true;
            }

            // [ 参考・引用 ]
            // MDN: HTMLElement.hidden
            // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/hidden

        }

        function DisplayNoneSwitch (elem) {
            console.log('DisplayNoneSwitch-起動🔥');

            // 1. id で要素を取得する
            const element = document.getElementById(elem);
            console.log({element});

            // 2. getComputedStyle() => Style の適用状況を知ることができる
            const displayStyle = getComputedStyle(element).display;
            console.log({displayStyle});

            // 3. Style を Switch するための条件文
            if (displayStyle == 'none') {
                
                // 4. HTML-Tag の Style は「 HTMLElement.style.属性名 = '値' 」の形でupdateできる
                element.style.display = 'block';
            } else {
                element.style.display = 'none';
            }

        }
    </script>
</head>
<body>
    <h1>HTML-Tagを非表示にする方法</h1>

    <h2>1. HTML-Tag に hidden を追加する</h2>
    <h3 hidden>Ninjya-Robotama🔥</h3>
    <p>HTMLタグに「 hidden 」属性を追加するだけで、画面上は非表示になります。</p>

    <h2>2. display: none を使用する</h2>
    <h3 class="robotama-1" >Display-None-Robotama🔥</h3>
    <p>CSS の Style として「 display: none; 」を設定してあげると、画面上は非表示になります。</p>

    <h2>3. hidden-属性の注意点</h2>
    <h4 class="appear-robotama" hidden >hidden-属性を追加したのに表示されているだと・・・</h4>
    <p>
        hidden-属性は、とても弱い存在です。
        <br>
        要素に強いセレクタを使用して none 以外の値(block, inline-blockなど)を定義すると、簡単に上書きされます。
    </p>

    <h2>4. hidden-属性の「表示/非表示」-Switch-Sample</h2>
    <h3 id="robotama" hidden >ロボ玉なのだ🔥</h3>
    <button type="button" onclick="HiddenSwitch('robotama')">ロボ玉-表示/非表示</button>

    <h2>5. display: none の「表示/非表示」-Switch-Sample</h2>
    <h3 id="gunma" >神聖グンマー帝国、万歳🔥</h3>
    <button type="button" onclick="DisplayNoneSwitch('gunma')">神聖グンマー帝国-表示/非表示</button>


</body>
</html>

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

Twitterやってます！Follow Me！

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！

参考・引用

  1. MDN: HTMLElement.hidden

最近の投稿

【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 JS_uuid JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) py_csv_to_json PythonでCSVをJSONに変換する方法 py_csv_cut PythonでCSV・Dataframeを指定の行数まで切り取る方法 js_for_of JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 Python_VSCode VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法

前の記事

php-define
【PHP入門】define と defined の違いと使い方…

次の記事

ページ(HTML)の表示・読み込み(load)時に実行されるJ…
Load-Event