如何表徵DOM的z索引？ （2）

Question

我一直在選擇z-index在CSS中有點小心。

我想遍歷DOM並報告所有的z索引及其各自的ID。

例如：

id   z-index 
header  10 
main   0 
menu   20 

最終的結果將是一個對象，它的鍵是元件id和值是z索引。有人可能會稱之爲z_obj

// pseudo code 

var z_obj = {el_id: el_zindex}; 

獲取z-index的每個元素（el）應使用像filter和下面的代碼很容易：

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

但我怎麼會遍歷DOM來獲取所有的z索引並將其存儲在一個對象中？

我想這樣做w/out庫，並使用上面的代碼，如果可能的話。

這將是一個很好的調試工具。

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; 
} 

DEMO：http://jsfiddle.net/mj3cR/1/

凡zObj是一個對象，由id屬性代表鍵，並通過z-index風格表示的值。

注意getComputedStyle沒有在IE < 9的支持，當然也有many polyfills :)

Answer 2

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; 
};