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

JavaScriptで要素が非表示になっているかどうかを確認する方法

Webページの開発では、特定の要素が現在非表示になっているかどうか（display: none が適用されているか）を判定したい場面がよくあります。JavaScriptでこれを実現するには、window.getComputedStyle() メソッドを使うのが一般的です。このメソッドは、CSSスタイルシートで設定された実際の表示状態を取得できるため、確実に非表示状態をチェックできます。

実装例

以下は、ボタンをクリックすると非表示になっているDIV要素を表示するサンプルコードです。クリック時には、まず getComputedStyle() で要素が「none」になっているかどうかを確認してから、表示に切り替えています。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .hiddenDiv {
        width: 100%;
        padding: 20px;
        text-align: center;
        background-color: lightblue;
        margin-top: 20px;
        display: none;
        font-size: 20px;
    }
    .showBtn {
        border: none;
        padding: 15px;
        font-size: 18px;
        background-color: rgb(86, 25, 155);
        color: white;
    }
</style>
</head>
<body>
<h1>JavaScriptで非表示の要素を検出する</h1>
<h2>下のボタンをクリックすると、非表示の要素が表示されます</h2>
<button class="showBtn">要素を表示する</button>
<div class="hiddenDiv">
これはDIV要素です
</div>
<script>
    document.querySelector(".showBtn").addEventListener("click", showHidden);
    function showHidden() {
        var x = document.querySelector(".hiddenDiv");
        if (window.getComputedStyle(x).display === "none") {
            x.style.display = "block";
        }
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。初期状態では、DIV要素は display: none の指定により非表示になっています。

JavaScriptで要素が非表示になっているかどうかを確認する方法

そして、「要素を表示する」ボタンをクリックすると、スクリプト内の条件分岐によって要素の display プロパティが「none」と判定され、block に変更されてDIV要素が画面に現れます。

JavaScriptで要素が非表示になっているかどうかを確認する方法

ポイント解説

  • window.getComputedStyle(x)：要素に実際に適用されているスタイル（外部CSS・インライン含む）を取得します。単純に element.style.display を参照すると、インラインスタイルしか見えないため、CSSファイルで非表示にされた要素は正しく判定できません。
  • visibility との違い：visibility: hidden の場合、要素は非表示でもレイアウト上のスペースは保持されます。完全にスペースごと消す場合は display: none を使います。
  • jQueryを使っている場合は、$(element).is(":visible") や $(element).is(":hidden") といった簡潔な書き方も可能です。
  1. JavaScriptで入力フィールド内のCapsLockがオンかどうかを検出する方法

    JavaScriptを使えば、入力フィールド内でユーザーがCapsLock（大文字固定）をオンにしているかどうかを簡単に検出できます。ポイントとなるのは、キーボードイベントオブジェクトが持つ getModifierState() メソッドです。このメソッドに「CapsLock」を指定すると、現在のCapsLockの状態を真偽値（true / false）で取得できます。CapsLock検出のサンプルコード以下は、入力フィールドでCapsLockがオンになったときに警告メッセージを表示する完全な実装例です。<!DOCTYPE html> <html> <head&g

  2. JavaScript配列で要素を検索する方法を徹底解説！find()メソッドの使い方

    JavaScriptで配列の中から特定の要素を検索したい場面は非常に多くあります。本記事では、最もよく使われるfind()メソッドを中心に、実際に動作するサンプルコードとともに分かりやすく解説します。 find()メソッドとは find()メソッドは、配列の各要素に対して指定したテスト関数（コールバック関数）を実行し、条件を満たした最初の要素の値を返します。条件に一致する要素が存在しない場合は undefined を返します。 基本構文 arr.find(callback(element[, index[, array]])[, thisArg]) callback: 各要素をテストする関数