JavaScript

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

地図ライブラリを使った時に、すべての要素に当たっている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")

例)

c0fed43b3e35e4613116e699fb6c8bb4.png