Question

我试图在用户滚动一定量后将图像的不透明度转换为0。不知道为什么但javascript函数不起作用。任何帮助将不胜感激。提前致谢。这是我的代码：

＆＃13;

var bengalsedit = document.getElementsByClassName("bengals_edited");
console.log(bengalsedit);

window.onscroll = function() {
  addOpacity()
};

function addOpacity() {
  if (document.body.scrollTop > 200) {
    bengalsedit.style.opacity = 0;
  }
}

＆＃13;

.bengals_edited {
  display: inline-block;
  width: 100%;
  position: absolute;
  z-index: 3;
  margin: 850px 0 0 0;
  height: auto;
  opacity: 1;
}

.bengals_edited img {
  display: inline-block;
  padding: 15px;
  background-color: #ffffff;
  width: 24%;
  float: left;
  margin-left: 15px;
  margin-top: -6px;
}

＆＃13;

<div class="bengals_edited">

  <img id="bengals_edit" src="media/Photographs/Edited_Photos/2015Sep03%20-%20Bengals%20vs%20Colts%20-%20103.jpg">

</div>

＆＃13;

Answer 1

bengalsedit是一个集合，而不是一个元素。

bengalsedit [0] .style.opacity = 0;

Answer 2

您正在使用getElementByClassName。这将返回一个HTMLCollection而不是单个元素。这可以通过两种方式解决：

使用getElementById并在元素上设置id，或
使用：bengalsedit[0]

如果你有超过1个元素来设置opcity，你需要遍历HTMLCollecion。

可以找到更多信息here

我的window.onscroll事件不起作用

2 个答案: