使用 For-Loop 对 Array 的所有元素进行样式化答案

【问题标题】：Styling all elements of Array with For-Loop使用 For-Loop 对 Array 的所有元素进行样式化
【发布时间】：2013-02-13 04:30:32
【问题描述】：

我有一个带有红色边框的 div。我希望这个边框在页面加载完成后 3 秒后消失。这个 div 中有 3 个图像，我希望它们在同一时间之后不透明 0.1。我尝试使用计时器执行此操作，但它不会运行。我能够让边框部分工作，但是当我尝试制作图像时它没有运行，并且 Aptana 说 for 循环所在的位置有错误。

function setPlaylist(){
    var playlist = document.getElementById('playlist');
    var thumbnails = document.getElementsByClassName('thumb').getElementByTagName('img');

    for( var i=0,i<thumbnails.length;i++)
    {
        thumbnails[i].style.opacity = ('0.1');
    }
    playlist.style.border = ('none');
    /*thumbnails.style.opacity = ('0.1');*/
}

function timerPL(){
    setTimeout(setPlaylist,3000);
}


window.addEventListener('load',timerPL,false);

【问题讨论】：

标签： javascript arrays html loops for-loop

【解决方案1】：

这个函数：

document.getElementsByClassName('thumb').getElementByTagName('img');
//                 ^
//                  \_ It's plural. It'll return an array of elements

您需要遍历它们：

var thumbs = document.getElementsByClassName('thumb');

for (var i = 0; i < thumbs.length; i++) {
    var thumb = thumbs[i];

    ...
}

如果您不关心旧版浏览器，请使用querySelectorAll：

var thumbs = document.querySelectorAll('#playlist .thumb img');

【讨论】：

所以我必须为每个元素编写一个 var thumb1、var thumb2 等？我那里只有三张图片，看来我还不如按 ID 获取元素，然后在没有循环的情况下这样做。
@Batman：您需要将原始循环放入我的问题中的循环中。或者只是在我的答案末尾用querySelectorAll 替换您的getElement... 电话，它应该可以工作。
如果我使用 querySelectorAll 存储它们，会像 thumbnails.style.opacity = ('0.1');应用于该列表中的所有元素？抱歉，这对我来说是全新的，试图弄清楚。
@Batman：不，您仍然需要使用for 循环遍历列表。