javascript - 如何表征 DOM 的 z 索引？ (2)

Question

我在 CSS 中选择 z 索引时有点粗心。

我想遍历 DOM 并报告所有 z 索引及其各自的 ID。

例如:

id           z-index
header       10
main         0
menu         20

最终结果将是一个对象，其键是元素 id，值是 z-index。人们可能会称其为 z_obj

// pseudo code

var z_obj = {el_id: el_zindex};

使用 filter 之类的东西和下面的代码应该很容易获取每个元素( el )的 z-index :

// attr is attribute
data = _.filter(el.attributes, function (attr) {
    return (/^z-index/).test(atttr.name);
});

但是我如何遍历 DOM 来获取所有 z 索引并将其存储在对象中？

我想在没有库的情况下执行此操作，并在可能的情况下使用上面的代码。

总的来说，这将是一个很好的调试工具。

Answer 1

您可以通过 getElementsByTagName("*") 获取所有元素，使用 for 循环迭代集合，并使用 window.getComputedStyle(Node) 。从那里，您可以检索z-index。这是一个例子:

var zObj, allEls, i, j, cur, style, zIndex;

zObj = {};
allEls = document.body.getElementsByTagName("*");
for (i = 0, j = allEls.length; i < j; i++) {
    cur = allEls[i];
    style = getComputedStyle(cur);
    zIndex = style.getPropertyValue("z-index");
    zObj[cur.id] = zIndex;
}

演示: http://jsfiddle.net/mj3cR/1/

其中 zObj 是一个对象，键由 id 属性表示，值由 z-index 样式表示。

请注意，IE < 9 不支持 getCompulatedStyle，但当然有 many polyfills :)