重写 Parallax-Script 使其读取多个 类 而不是一个 Id

Question

嘿嘿，

有什么办法可以得到这个脚本：

function parallax (){
    var paralax_effect = document.getElementById('div1');
    paralax_effect.style.top = -(window.pageYOffset / 4)+'px';
}
window.addEventListener('scroll', parallax, false);

到运行多个Classes而不是一个Id?

我试过这个：

function parallax (){
    var paralax_effect = document.getElementsByClassName('div1');
    paralax_effect.style.top = -(window.pageYOffset / 4)+'px';
}
window.addEventListener('scroll', parallax, false);

但这在某种程度上不起作用。

提前致谢！

Answer 1

getElementsByClassName returns 不是单个元素而是整个元素列表，而 getElementById（注意 Element/Elements 这个词的区别）returns只有一个元素。

因此，在您的第二个代码中，您将 class "div1" 中的元素列表存储在 var paralax_effect 中。为了操作这些元素，您必须使用 for 遍历它们。示例：

for (var i = 0; i < paralax_effect.length; i++) {
    current_element = paralax_effect[i]
    current_element.style.top = -(window.pageYOffset / 4)+'px';
}

这要求您的 HTML 至少有一个元素带有 class="div1"。