使用javascript改变多个对象的样式

Changing style of multiple objects using javascript

本文关键字：对象 样式 javascript 改变 使用      更新时间：2023-09-26

我正在使用WordPress创建一个网站，因此内容是动态创建的。元素ID也是动态生成的

每个容器可以有以下元素(一个容器可以有多个，但不相同):
t_1
f
₂
f_3

我还在元素ID的末尾添加了容器计数，所以每个元素都有一个唯一的ID

假设PHP将生成如下HTML:

<div id="container_1">
  <div id=f_1_1>
    //content
  </div>
  <div id=f_2_1>
    //content
  </div>
</div>
<div id="container_2">
  <div id=t_1_2>
    //content
  </div>
</div>
<div id="container_3">
  <div id=f_1_3>
    //content
  </div>
</div>

我想动画这些元素的位置作为用户滚动，我添加了javascript来做到这一点:

var scroll = window.pageYOffset;
window.addEventListener('scroll', function() {
    scroll = window.pageYOffset;
    requestAnimationFrame(scroll)
}, false)
function scroll() {
    document.getElementById("f_1_1").style.top = scroll * 10 + 'px';
}

问题来了，我不知道应该通过ID获取哪些元素。
我想做一个循环，我检查每个容器里面的元素，但是我认为它会使用太多的资源，并且会延迟，因为每次用户滚动时函数都会运行。

我尝试的另一个解决方案是动态地将javascript添加到每个容器中，这样我就确切地知道我需要动画的元素。它只适用于第一个容器，因为当我添加下一个容器时，有多个函数使用相同的名称，只有最后一个函数被执行

<div id="container_1">
  <div id=f_1_1>
    //content
  </div>
  <script type="text/javascript">
    function scroll() {
      document.getElementById("f_1_"+<?php echo $pagecounter?>).style.top = scroll * 10 + 'px';
    }
  </script>
</div>

当元素进入viewport时，可以使用- WOW.js来制作动画

<div id="container_1">
  <div id=f_1_1 class="wow myCustomAnimation">
    //content
  </div>
  <div id=f_2_1 class="wow myCustomAnimation">
    //content
  </div>
</div>
<div id="container_2">
  <div id=t_1_2 class="wow myCustomAnimation">
    //content
  </div>
</div>
<div id="container_3">
  <div id=f_1_3 class="wow myCustomAnimation">
    //content
  </div>
</div>

您必须根据您的要求填写myCustomAnimation

相关文章：