javascript - 重写视差脚本，使其读取多个类而不是一个 ID

Question

嘿哟，

有什么方法可以得到这个脚本:

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

运行多个类而不是一个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返回的不是单个元素，而是整个元素列表，而 getElementById(注意 Element/Elements 一词的区别)仅返回单个元素。

因此，在第二个代码中，您将类为“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" 的元素。