Javascript 如何使用；getElementsByClassName"；从同一元素获取多个类
我已经编写了一些js来按类名获取元素，但是我所针对的元素有两个类Javascript 如何使用；getElementsByClassName"；从同一元素获取多个类,javascript,jquery,class,Javascript,Jquery,Class,我已经编写了一些js来按类名获取元素，但是我所针对的元素有两个类 <div class="module gh"> 出于某种原因，我得到了错误“uncaughttypeerror:cannotsetproperty'-webkit animation'of undefined”，这表明找不到该类。我需要在这里做什么 这里是完整的代码，如果有人愿意帮助我清理它，并分享他们为什么会做出更改，我将不胜感激。刚刚进入JS btw jQuery(document).ready(function
<div class="module gh">
jQuery(document).ready(function(){jQuery('.carousel').each(function(index, element){jQuery(this)[index].slide = null;});jQuery('.carousel').carousel('cycle');});
var yPosition;
window.onload = function(){
yPosition = document.getElementById("sp-menu-wrapper").offsetTop;
}
window.onscroll = function(){
var stickyMenu = document.getElementById("sp-menu-wrapper");
var userOneSlideIn = document.getElementById("sp-user1");
var userTwoSlideIn = document.getElementById("sp-user2");
var userThreeSlideIn = document.getElementById("sp-user3");
var userFourSlideIn = document.getElementById("sp-user4");
var gh = document.getElementsByClassName("gh");
if( document.getElementById("sp-user1") != null && document.getElementById("sp-user2") != null && document.getElementById("sp-user3") != null && document.getElementById("sp-user4") != null && yPosition <= (window.pageYOffset + -100) ){ // compare original y position of element to y position of page
userOneSlideIn.style["-webkit-animation"] = "flyin1 1s ease forwards";
userOneSlideIn.style["-moz-animation"] = "flyin1 1s ease forwards";
userOneSlideIn.style["-os-animation"] = "flyin1 1s ease forwards";
userOneSlideIn.style["-ms-animation"] = "flyin1 1s ease forwards";
userOneSlideIn.style["animation"] = "flyin1 1s ease forwards";
userOneSlideIn.style.marginLeft = "0px"
userTwoSlideIn.style["-webkit-animation"] = "flyin2 1s ease forwards";
userTwoSlideIn.style["-moz-animation"] = "flyin2 1s ease forwards";
userTwoSlideIn.style["-os-animation"] = "flyin2 1s ease forwards";
userTwoSlideIn.style["-ms-animation"] = "flyin2 1s ease forwards";
userTwoSlideIn.style["animation"] = "flyin2 1s ease forwards";
userTwoSlideIn.style.marginLeft = "30px"
userThreeSlideIn.style["-webkit-animation"] = "flyin3 1s ease forwards";
userThreeSlideIn.style["-moz-animation"] = "flyin3 1s ease forwards";
userThreeSlideIn.style["-os-animation"] = "flyin3 1s ease forwards";
userThreeSlideIn.style["-ms-animation"] = "flyin3 1s ease forwards";
userThreeSlideIn.style["animation"] = "flyin3 1s ease forwards";
userThreeSlideIn.style.marginLeft = "30px"
userFourSlideIn.style["-webkit-animation"] = "flyin4 1s ease forwards";
userFourSlideIn.style["-moz-animation"] = "flyin4 1s ease forwards";
userFourSlideIn.style["-os-animation"] = "flyin4 1s ease forwards";
userFourSlideIn.style["-ms-animation"] = "flyin4 1s ease forwards";
userFourSlideIn.style["animation"] = "flyin4 1s ease forwards";
userFourSlideIn.style.marginLeft = "30px"
}
if( document.getElementById("sp-menu-wrapper") != null && yPosition <= window.pageYOffset ){
stickyMenu.style.position = "fixed";
stickyMenu.style.top = "0px";
stickyMenu.style.boxShadow= "rgb(112, 173, 139) 5px 5px 1200px";
stickyMenu.style.width= "100%";
stickyMenu.style.zIndex= "1";
}
else{
stickyMenu.style.position = "inherit";
stickyMenu.style.top = "";
}
if( document.getElementsByClassName("gh") != null && yPosition <= (window.pageYOffset + -400) ){
gh.style["-webkit-animation"] = "ffr 2s ease forwards";
gh.style["-moz-animation"] = "ffr 2s ease forwards";
gh.style["-os-animation"] = "ffr 2s ease forwards";
gh.style["-ms-animation"] = "ffr 2s ease forwards";
gh.style["animation"] = "ffr 2s ease forwards";
gh.style.display = "block";
}
}
jQuery（document）.ready（function（）{jQuery（'.carousel'）.each（function（index，element）{jQuery（this）[index].slide=null；}）；jQuery（'.carousel'）.carousel（'cycle'）；}）；
变异位置；
window.onload=函数（）{
yPosition=document.getElementById（“sp菜单包装器”）.offsetTop；
}
window.onscroll=函数（）{
var stickyMenu=document.getElementById（“sp菜单包装器”）；
var userOneSlideIn=document.getElementById（“sp-user1”）；
var userTwoSlideIn=document.getElementById（“sp-user2”）；
var userThreeSlideIn=document.getElementById（“sp-user3”）；
var userFourSlideIn=document.getElementById（“sp-user4”）；
var gh=document.getElementsByClassName（“gh”）；
如果（document.getElementById（“sp-user1”）！=null&&document.getElementById（“sp-user2”）！=null&&document.getElementById（“sp-user3”）！=null&&document.getElementById（“sp-user4”）！=null&&yPosition请使用querySelectorAll而不是getElementsByClassName（）
这将返回元素数组。您需要使用索引访问它，例如，gh[0]将为您提供第一个元素。请检查
选中“使用querySelectorAll而不是GetElementsByCassName（）”
这将返回元素数组。您需要使用索引访问它，例如，gh[0]将为您提供第一个元素。请检查
选中你有数组结果的：
var gh = document.getElementsByClassName("module gh");
因为您有多个带有class=“module gh”
的div
您应该在代码中编写如下内容：
for(var i=0; i<gh.length; i++) {
gh[i].style ...
}
for（var i=0；i您有以下数组结果：
var gh = document.getElementsByClassName("module gh");
因为您有多个带有class=“module gh”
的div
您应该在代码中编写如下内容：
for(var i=0; i<gh.length; i++) {
gh[i].style ...
}
用于（var i=0；igetElementsByClassName
使用CSS类名来标识文档中的元素，这意味着它将查看每个元素的class属性。一个元素可以有一个或多个CSS类，就像在我们的示例文档中，我们有一个div，其中包含两个classmodule
和gh
ntsByClassName选择器您可以使用两个CSS类中的一个或两个来选择项
var el = document.getElementsByClassName('module gh');
console.log(el)
下面是getElementsByClassName
使用CSS类名来标识文档中的元素，这意味着它将查看每个元素的class属性。一个元素可以有一个或多个CSS类，就像在我们的示例文档中，我们有一个带有两个类的divmodule
和gh
lementsByClassName选择器您可以使用两个CSS类中的任意一个或甚至两个来选择项
var el = document.getElementsByClassName('module gh');
console.log(el)
请尝试修改以下内容：
var gh = document.getElementsByClassName("module gh");
if( document.getElementsByClassName("gh") != null && yPosition <= (window.pageYOffset + -400) ){
for(var k=0; k < gh.length; k++){
gh[k].style["-webkit-animation"] = "ffr 2s ease forwards";
gh[k].style["-moz-animation"] = "ffr 2s ease forwards";
gh[k].style["-os-animation"] = "ffr 2s ease forwards";
gh[k].style["-ms-animation"] = "ffr 2s ease forwards";
gh[k].style["animation"] = "ffr 2s ease forwards";
gh[k].style.display = "block";
}
}
var gh=document.getElementsByClassName（“模块gh”）；
如果（document.getElementsByClassName（“gh”）！=null&&yPosition请尝试修改此选项：
var gh = document.getElementsByClassName("module gh");
if( document.getElementsByClassName("gh") != null && yPosition <= (window.pageYOffset + -400) ){
for(var k=0; k < gh.length; k++){
gh[k].style["-webkit-animation"] = "ffr 2s ease forwards";
gh[k].style["-moz-animation"] = "ffr 2s ease forwards";
gh[k].style["-os-animation"] = "ffr 2s ease forwards";
gh[k].style["-ms-animation"] = "ffr 2s ease forwards";
gh[k].style["animation"] = "ffr 2s ease forwards";
gh[k].style.display = "block";
}
}
var gh=document.getElementsByClassName（“模块gh”）；
如果（document.getElementsByClassName（“gh”）！=null&&yPosition根据，您的方法应该可以工作。此外，请记住，使用带有未知类名的document.getElementsByClassName（）
返回一个空数组，因此它永远不会为null
（请参阅上次的if
）
Teemu的评论是正确的，但考虑到你是JS新手，这没什么大不了的
但是，我看到在加载网页时，JS会尽快执行，因此如果JS试图干扰尚未创建的HTML元素，就会出现错误
您看到的第一行代码是在DOM准备就绪、所有元素都已创建时执行的；我至少可以建议您将window.onscroll
放在JQuery代码的第一个深度内，并将window.onload
内容放在JQuery的window.onscroll之前
我给你一个建议：
jQuery(document).ready(function(){
//You can create your yPosition variable here because it will be used only inside this function.
//Then you can put the window.onload content here (only inside the function, since JQuery(document).ready() is doing the same thing as window.onload)
// And here you can write your window.onscroll
jQuery('.carousel').each(function(index, element){
jQuery(this)[index].slide = null;
});
jQuery('.carousel').carousel('cycle');
});
var yPosition;
window.onload = function(){
yPosition = document.getElementById("sp-menu-wrapper").offsetTop;
}
window.onscroll = function(){
var stickyMenu = document.getElementById("sp-menu-wrapper");
var userOneSlideIn = document.getElementById("sp-user1");
var userTwoSlideIn = document.getElementById("sp-user2");
var userThreeSlideIn = document.getElementById("sp-user3");
var userFourSlideIn = document.getElementById("sp-user4");
var gh = document.getElementsByClassName("gh");
if( document.getElementById("sp-user1") != null && document.getElementById("sp-user2") != null && document.getElementById("sp-user3") != null && document.getElementById("sp-user4") != null && yPosition <= (window.pageYOffset + -100) ){ // compare original y position of element to y position of page
userOneSlideIn.style["-webkit-animation"] = "flyin1 1s ease forwards";
userOneSlideIn.style["-moz-animation"] = "flyin1 1s ease forwards";
userOneSlideIn.style["-os-animation"] = "flyin1 1s ease forwards";
userOneSlideIn.style["-ms-animation"] = "flyin1 1s ease forwards";
userOneSlideIn.style["animation"] = "flyin1 1s ease forwards";
userOneSlideIn.style.marginLeft = "0px"
userTwoSlideIn.style["-webkit-animation"] = "flyin2 1s ease forwards";
userTwoSlideIn.style["-moz-animation"] = "flyin2 1s ease forwards";
userTwoSlideIn.style["-os-animation"] = "flyin2 1s ease forwards";
userTwoSlideIn.style["-ms-animation"] = "flyin2 1s ease forwards";
userTwoSlideIn.style["animation"] = "flyin2 1s ease forwards";
userTwoSlideIn.style.marginLeft = "30px"
userThreeSlideIn.style["-webkit-animation"] = "flyin3 1s ease forwards";
userThreeSlideIn.style["-moz-animation"] = "flyin3 1s ease forwards";
userThreeSlideIn.style["-os-animation"] = "flyin3 1s ease forwards";
userThreeSlideIn.style["-ms-animation"] = "flyin3 1s ease forwards";
userThreeSlideIn.style["animation"] = "flyin3 1s ease forwards";
userThreeSlideIn.style.marginLeft = "30px"
userFourSlideIn.style["-webkit-animation"] = "flyin4 1s ease forwards";
userFourSlideIn.style["-moz-animation"] = "flyin4 1s ease forwards";
userFourSlideIn.style["-os-animation"] = "flyin4 1s ease forwards";
userFourSlideIn.style["-ms-animation"] = "flyin4 1s ease forwards";
userFourSlideIn.style["animation"] = "flyin4 1s ease forwards";
userFourSlideIn.style.marginLeft = "30px"
}
if( document.getElementById("sp-menu-wrapper") != null && yPosition <= window.pageYOffset ){
stickyMenu.style.position = "fixed";
stickyMenu.style.top = "0px";
stickyMenu.style.boxShadow= "rgb(112, 173, 139) 5px 5px 1200px";
stickyMenu.style.width= "100%";
stickyMenu.style.zIndex= "1";
}
else{
stickyMenu.style.position = "inherit";
stickyMenu.style.top = "";
}
if( document.getElementsByClassName("gh") != null && yPosition <= (window.pageYOffset + -400) ){
gh.style["-webkit-animation"] = "ffr 2s ease forwards";
gh.style["-moz-animation"] = "ffr 2s ease forwards";
gh.style["-os-animation"] = "ffr 2s ease forwards";
gh.style["-ms-animation"] = "ffr 2s ease forwards";
gh.style["animation"] = "ffr 2s ease forwards";
gh.style.display = "block";
}
}
jQuery（文档）.ready（函数（）{
//您可以在此处创建yPosition变量，因为它将仅在此函数中使用。
//然后可以将window.onload内容放在这里（仅在函数内部，因为JQuery（document）.ready（）与window.onload做相同的事情）
//在这里你可以写你的window.onscroll
jQuery（'.carousel'）。每个（函数（索引，元素）{
jQuery（this）[index].slide=null；
});
jQuery（'.carousel'）.carousel（'cycle'）；
});
变异位置；
window.onload=函数（）{
yPosition=document.getElementById（“sp菜单包装器”）.offsetTop；
}
window.onscroll=函数（）{
var stickyMenu=document.getElementById（“sp菜单包装器”）；
var userOneSlideIn=document.getElementById（“sp-user1”）；
var userTwoSlideIn=document.getElementById（“sp-user2”）；
var userThreeSlideIn=document.getElementById（“sp-user3”）；
var userFourSlideIn=document.getElementById（“sp-user4”）；
var gh=document.getElementsByClassName（“gh”）；
如果（document.getElementById（“sp-user1”）！=null&&document.getElementById（“sp-user2”）！=null&&document.getElementById（“sp-user3”）！=null&&document.getElementById（“sp-user4”）！=null&&yPosition根据，您的方法应该可以工作。此外，请记住使用document.getElementsByClassName（）带有未知类名的
返回一个空数组，这样它就永远不会null
（如果
，请参阅上一个）
Teemu的评论是正确的，但考虑到你是JS新手，这没什么大不了的
但是，我发现在加载网页时，JS会尽快执行，因此如果您的JS试图干扰尚未创建的HTML元素，则会出现错误。if( document.querySelectorAll("module gh") != null && yPosition <= (window.pageYOffset + -400) ){ // compare original y position of element to y position of page
for(var g=0; g<gh.length; g++) {
gh[g].style["-webkit-animation"] = "ffr 2s ease forwards";
gh[g].style["-moz-animation"] = "ffr 2s ease forwards";
gh[g].style["-os-animation"] = "ffr 2s ease forwards";
gh[g].style["-ms-animation"] = "ffr 2s ease forwards";
gh[g].style["animation"] = "ffr 2s ease forwards";
gh[g].style.display = "block";
}
}