【JavaScript】クリックした要素を最前面に表示する（z-index）

Webシステムの開発で、クリックした図形を最前面に表示というタスクがあったので、CSSのz-indexをJavaScriptで設定するようにしました。実際にシステムに組み込む前に次の動画の様なHTMLを作成したので、まとめたいと思います。

クリックした図形を最前面に表示
「Z=数字」はz-indexを表示　※クリックされた図形は表示が更新されます
３つの図形とものz-indexの初期値は0
トータルのクリック回数をz-indexに設定

CSSのzindex

zindexは要素の重なりを数字で指定します。
要素が重なることがあるときに、よく使います。
書き方は次の通りです。

CSS

要素{
   z-index:数字;
}

数字は整数で指定（少数はNG）
設定できる数字の範囲は、-2147483647～2147483647
数字が大きい要素が上に表示される

注意！！！

z-indexはposition: staticの要素には使えません（position: staticの要素に指定してもz-indexが効かない）
使用する際は、positionにrelative、absolute、fixedのいずれかを設定してください。

JavaScriptでz-indexを設定

JavaScript

要素.style.zIndex = 数字;

z-indexではなく、zIndex（Iは大文字）なので注意してください。
間のstyleも忘れないように！
私はstyleを書き忘れて半日悩んだことがあります。忘れてもエラーが出ないので、気づきにくいです。

サンプルコード

最初の動画のコードです。

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        /* 図形の設定 */
        .shape{
            position:absolute;
            height: 70px;
            width: 140px;
            border-radius: 10px;
            cursor: pointer;
        }

        /* z-index表示用、図形の左下に表示されるように設定 */
        .shape_text{
            margin: 0;
            padding: 0;
            position:absolute;
            left: 5%;
            top: 60%;
        }
    </style>
    <body>
        <!-- 薄い赤色の図形 -->
        <div class="shape" style="z-index:0;background-color:lightsalmon;top:30px;left:70px;">
            <p class="shape_text"></p>
        </div>

        <!-- 薄い青色の図形 -->
        <div class="shape" style="z-index:0;background-color:lightskyblue;top:60px;left:140px;">
            <p class="shape_text"></p>
        </div>

        <!-- 薄い黄色の図形 -->
        <div class="shape" style="z-index:0;background-color:lemonchiffon;top:90px;left:210px;">
            <p class="shape_text"></p>
        </div>

        <script>
            // 図形がクリックされた回数をカウントする変数
            let count = 0;

            // 図形にクリックイベント登録＆z-indexを表示
            let eleShape = document.getElementsByClassName("shape");
            for(var i=0; i<eleShape.length; i++){
                // クリックイベント登録
                eleShape[i].addEventListener("click", moveFront, event);
                // 図形にz-indexを表示
                showZIndex(eleShape[i]);
            }
            
            // クリックされた要素のz-indexに、クリックされた回数を設定する
            function moveFront(e){
                // 図形のクリック数をカウントアップ
                count++;
                // z-indexに図形のクリック数を設定（最前面に表示される）
                e.target.style.zIndex = count;
                // 図形にz-indexを表示
                showZIndex(e.target);
            }
            
            // 指定した図形にz-indexを表示する
            // z-indexは図形の中の<p class="shape_text">に表示
            function showZIndex(eleShape){
                eleShape.getElementsByClassName("shape_text")[0].innerText = "Z=" + eleShape.style.zIndex;
            }
        </script>
    </body>
</html>

CSSのzindex

JavaScriptでz-indexを設定

サンプルコード

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル