Javascript queryselector.style.modify“未捕获的TypeError”[重复]

Question

    <script type="text/javascript">
    var ypos,sH,sH6,sIMG,sH4,sP;
        function trigger(){
        ypos=window.pageYOffset;
        /*..............................................Second page...*/
        sH=document.querySelector("#second h2");
        sH6=document.querySelector("#second h6");
        sIMG=document.querySelectorAll("#second img");
        sH4=document.querySelectorAll("#second h4");
        sP=document.querySelectorAll("#second p");
        /*.....................................Second page trigger...*/

        console.log(ypos);
            sH.style.opacity=0;
            if(ypos>120){ 
            sH.style.opacity=1;
            sH.style.transition="3s";
        };
            sH6.style.opacity=0;
            if(ypos>200){ 
            sH6.style.opacity=1;
            sH6.style.transition="3s";
        };
            sIMG.style.opacity=0;
            if(ypos>320){ 
            sIMG.style.opacity=1;
            sIMG.style.transition="3s";
        };
            sH4.style.opacity=0;
            if(ypos>400){ 
            sH4.style.opacity=1;
            sH4.style.transition="3s";
        };
            sP.style.opacity=0;
            if(ypos>480){ 
            sP.style.opacity=1;
            sP.style.transition="3s";
        };

        };

     window.addEventListener("scroll",trigger);
    </script>

当我尝试修改“样式”时出现错误

未捕获的类型错误：无法设置未定义的属性“不透明度”

我发现这是节点列表，我试图添加 [0] 因为它是第一个元素，但没有运气。如何定义一个对象？

我通常使用 ID，但现在我有很多元素要制作动画。

我是 javascript 新手，我不知道如何使用 jQuery

Answer 1

document.querySelectorAll 返回NodeList，您需要对其进行迭代

所以要获得第一个元素，您可以通过[0]

sIMG[0].style

---

但是document.querySelector 不返回NodeList，它返回第一个匹配的元素。在这里你不需要通过[0]获取第一个元素

sH[0].style.opacity=0;  
// ^-- error here

应该是：

sH.style.opacity=0;