0

在我的 CSS 中选择 z-indexes 时我有点粗心。

我想遍历 DOM 并用它们各自的 ID 报告所有 z-indexes。

例如：

id           z-index
header       10
main         0
menu         20

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

// pseudo code

var z_obj = {el_id: el_zindex};

使用以下代码获取每个元素 ( el) 的 z-index 应该很容易filter：

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

但是我将如何遍历 DOM 以获取所有 z-index 并将其存储在一个对象中？

我想用库来做这个，如果可能的话，使用上面的代码。

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

4

2 回答 2

2

您可以使用 获取所有元素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样式表示的值。

请注意，getComputedStyleIE < 9 不支持，但当然有很多 polyfill :)

于 2013-08-07T15:11:43.873 回答
0 
reportZ = function () {
    var z_arr = {},
        all_el = document.body.getElementsByTagName("*"),
        i,
        len,
        cur,
        style,
        z_index;
    for (i = 0, len = all_el.length; i < len; i++) {
        cur = all_el[i];
        style = win.getComputedStyle(cur);
        z_index = style.getPropertyValue("z-index");
        if (z_index !== "auto") {
            z_arr[i] = [cur.id, cur.tagName, cur.className, z_index];
        }
    }
    return z_arr;
};
于 2013-08-12T17:37:48.897 回答