Javascript queryselector.style.modify "uncaught TypeError"
Javascript queryselector.style.modify "uncaught TypeError"
<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>
当我尝试修改 "style" 时出现错误
Uncaught TypeError: Cannot set property 'opacity' of undefined
我发现那是节点列表,我试图添加 [0] 因为它是第一个元素,但没有成功。如何定义对象?
我通常使用 ID,但现在我有很多元素需要制作动画。
我是 javascript 的新手,我不知道如何使用 jQuery
document.querySelectorAll
returns NodeList
,您需要对其进行迭代
因此,要获取第一个元素,您可以通过 [0]
sIMG[0].style
但是document.querySelector
doesn't return NodeList
,它returns第一个匹配的元素。在这里你不需要通过 [0]
获取第一个元素
sH[0].style.opacity=0;
// ^-- error here
应该是:
sH.style.opacity=0;
<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>
当我尝试修改 "style" 时出现错误
Uncaught TypeError: Cannot set property 'opacity' of undefined
我发现那是节点列表,我试图添加 [0] 因为它是第一个元素,但没有成功。如何定义对象?
我通常使用 ID,但现在我有很多元素需要制作动画。
我是 javascript 的新手,我不知道如何使用 jQuery
document.querySelectorAll
returns NodeList
,您需要对其进行迭代
因此,要获取第一个元素,您可以通过 [0]
sIMG[0].style
但是document.querySelector
doesn't return NodeList
,它returns第一个匹配的元素。在这里你不需要通过 [0]
sH[0].style.opacity=0;
// ^-- error here
应该是:
sH.style.opacity=0;