javascript - 在函数中使用getElementsByClassName选择所有元素，不起作用

我有一个使用Javascript的简单“淡出滚动文本”效果。

这是一个有效的小提琴：https://jsfiddle.net/4opjh5ef/1/

我想让效果应用于类fade的所有元素。但是，尝试在函数内部循环它似乎不起作用。

这是无效的代码：

var fadeOut = document.getElementsByClassName('fade');
var fadeOutParent = fadeOut.parentElement.scrollHeight;


function scrolled() {

    for (var i = 0; i < fadeOut.length; i++) {
      	fadeOut[i].style.opacity = 1-((window.pageYOffset)/(fadeOutParent/2));
    }

}

window.addEventListener('scroll', scrolled);

任何想法？

最佳答案

您的问题是您试图选择parentElement的NodeList，这是不可能的。

在这里，尝试将fadeOutParent变量移到for循环中：

var fadeOut = document.getElementsByClassName("fade");
function scrolled() {
  for (var i = 0; i < fadeOut.length; i++) {
    var fadeOutParent = fadeOut[i].parentElement.scrollHeight;
    fadeOut[i].style.opacity = 1 - ((window.pageYOffset) / (fadeOutParent / 2));
  }
}
window.addEventListener("scroll", scrolled);

祝好运。

关于javascript - 在函数中使用getElementsByClassName选择所有元素，不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55790956/