querySelectorAll 的使用不适用

Question

我有以下代码

let cardwrap = document.querySelectorAll(".portfolio-posts .t-entry-visual")
  window.addEventListener("scroll", () => {
      var top = window.pageYOffset / 62;
      cardwrap.style.transform = 'translate3d(0px, ' + top + 'px, 0px)';
  });

还有我的HTML

<div class="portfolio-posts">
   <div class="t-entry-visual"></div>
   <div class="t-entry-visual"></div>
   <div class="second-visual"></div>
   <div class="t-entry-visual"></div>
</div>

当我使用 querySelector 时，我得到了第一个 .t-entry-visual 元素上的转换样式。但是当我使用 querySelectorAll 时，它不会在任何元素上应用样式，而我希望在所有 .t-entry-visual 元素上应用转换样式。

Answer 1

您必须使用 forEach 遍历它，因为 querySelectorAll 不是 return 一个元素而是元素的集合。

let cardwrap = document.querySelectorAll(".portfolio-posts .t-entry-visual");
window.addEventListener("scroll", () => {
  var top = window.pageYOffset / 62;
  cardwrap.forEach(function(elmt) {
    elmt.style.transform = 'translate3d(0px, ' + top + 'px, 0px)';
  });
});

另请参阅：

querySelectorAll 的使用不适用

Use of querySelectorAll isn't applying

javascript

queryselector