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

Question

我有一个带有红色边框的 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);

Answer 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');