javascript - 定义类中所有对象的 zIndex

Question

我想将对话框类中几个元素的 z-index 设置为 1。

目前我正在使用下面的代码：

document.getElementsByClassName("dialog")[0].style.zIndex = "1";

但肯定只适用于第一个元素。定义数组也不起作用，因为我在类中没有固定数量的对象。有没有其他方法可以解决这个问题？？

Answer 1

使用循环：

var els = document.getElementsByClassName("dialog");

for (var i = 0, l = els.length; i < l; i++) {
   els[i].style.zIndex = 1;
}

这是关于循环替代品的有趣文章：http: //htmlcssjavascript.com/javascript/another-front-end-engineer-interviewing-question-loop-alternatives/

更新：正如评论中指出的那样，您编写的代码仅影响第一个元素（索引 [0]）。该方法getElementsByClassName返回一个包含所有选定元素的NodeList 。您需要遍历列表以单独更新每个元素，因此需要循环。

Answer 2

您可能希望遍历 getElementsByClassName() 返回的数组元素，如下所示：

var a = document.getElementsByClassName("dialog");
for (var x = 0; x < a.length; x++) {
  a[x].style.zIndex = 1;
}

Answer 3

通过使用[0]，您只选择第一个元素。

我想向您展示另一种遍历这些元素的方法。

var a = document.getElementsByClassName( 'dialog' ),
    forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach)

forEach( a, function( el ) {
    el.style.zIndex = 1
} )