Help us understand the problem. What is going on with this article?

再帰的にエレメントを辿って適応されているスタイルの値を取得する。

More than 1 year has passed since last update.

地図ライブラリを使った時に、すべての要素に当たっているz-indexの値を知りたい時があったので、指定したエレメント以下を再帰的に辿りスタイルの値を取得するスニペットを書いた。

function getProperty(element, key) {

    var traverse = function(obj){
        var tree = [];
        tree.push(obj);
        visit(obj);
        function visit(node) {
            if (node && node.hasChildNodes()) {
                var child = node.firstChild;
                while (child) {
                    if (child.nodeType === 1 && child.nodeName != 'SCRIPT'){
                        tree.push(child);
                        visit(child);
                    }
                    child = child.nextSibling;
                }
            }
        }
        return tree;
    };


    var tree = traverse(element);

    var propertys = tree.map(function(d){
        return {element:d, value:getComputedStyle(d).getPropertyValue("z-index")};
    });


    return propertys;


}

上記ファンクションをコンソールに流し込んで使う。
(chromeならsnippetsに登録しておくと便利)

c0fed43b3e35e4613116e699fb6c8bb4-sni.png

任意のエレメントを指定すると、それ以下のエレメントに設定されてるスタイルを取得して配列として返す。

> getProperty(document.querySelector("body"), "z-index")

出力結果を多少整理してあげると読みやすいかも

getProperty(document.querySelector("body"), "z-index") //body以下のz-indexを取得
    .filter(function(d){ return !isNaN(+d.value )}) //z-indexの値が数値以外は対象外に
    .map(function(d){ return [d.element, d.value] }) //エレメント名とz-indexの値を抽出
    .sort(function(a, b){ return b[1] - a[1]  }) //z-indexの値が大きい順にソート

例)

c0fed43b3e35e4613116e699fb6c8bb4.png

_shimizu
群馬・東京間を行き来する出稼ぎエンジニアです。ブログではGIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。JavaScript勉強中
https://gunmagisgeek.com/blog/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away