如何使用“getElementsByClassName”从同一元素中获取多个类

时间：2014-09-17 07:37:46

标签： javascript jquery class

我已经编写了一些js来按类名获取元素，但我所定位的元素有两个类。

<div class="module gh">

这是我用来尝试定位此类的脚本。

var gh = document.getElementsByClassName("module gh");

出于某种原因，我收到错误“未捕获的TypeError：无法设置属性'-webkit-animation'未定义”这表明无法找到该类。我需要做什么？

以下是完整的代码，如果有人关心帮我清理并分享他们为什么会做出改变我会非常感激。刚刚进入JS btw ... 

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(){//when document is ready - fire

var yPosition;//yPosition variable.

yPosition = document.getElementById("sp-menu-wrapper").offsetTop;// save original y position of element before scrolling.

window.onscroll = function(){// on scroll this will fire.

//declare all variables
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.querySelectorAll(".module.gh");

    //below - if element exists and scrlling is at this point - fire
    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";//user1 style
        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";//user2 style
        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";//user3 style
        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";//user4 style
        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"

    }

    //below - if element exists and scrolling is at this point - fire
    if( document.getElementById("sp-menu-wrapper") != null && yPosition <= window.pageYOffset ){

        //sticky menu style
        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{

        //always show
        stickyMenu.style.position = "inherit";
        stickyMenu.style.top = "";
    }

    //below - if element exists and scrolling is at this point - fire
    if( document.querySelectorAll(".module.gh") != null && yPosition <= (window.pageYOffset + -400) ){

        //loop through array
        for(var g=0; g<gh.length; g++) {
            gh[g].style["-webkit-animation"] = "ffr 2s ease forwards";//class="module gh"
            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";

        }

    }

}

//fire carousel onload
jQuery('.carousel').each(function(index, element){

    jQuery(this)[index].slide = null;

});

jQuery('.carousel').carousel('cycle');

});

6 个答案:

答案 0 :(得分：2)

您有以下数据结果：

var gh = document.getElementsByClassName("module gh");

因为您有多个带有class="module gh"的div。

你应该在你的代码中写下这样的东西：

for(var i=0; i<gh.length; i++) {
   gh[i].style ...
}

我在这里有一些示例代码：

http://jsfiddle.net/j1tpkfa5/

或在你的情况下：

if( document.getElementsByClassName("gh") != null && yPosition <= (window.pageYOffset + -400) ){
   for(var i=0; i<gh.length; i++) {
      gh[i].style["-webkit-animation"] = "ffr 2s ease forwards";
      gh[i].style["-moz-animation"] = "ffr 2s ease forwards";
      gh[i].style["-os-animation"] = "ffr 2s ease forwards";
      gh[i].style["-ms-animation"] = "ffr 2s ease forwards";
      gh[i].style["animation"] = "ffr 2s ease forwards";
      gh[i].style.display = "block";
   }    
}

答案 1 :(得分：2)

根据W3C HTML5 Specification，您的方法应该有效。此外，请记住，使用具有未知类名的document.getElementsByClassName()会返回一个空数组，因此它永远不会null（请参阅上一个if）。

Teemu的评论对于JQuery是正确的，但鉴于你是JS的新手，这没什么大不了的。

但是，我看到你的JS在网页加载时会尽快执行，所以如果你的JS试图干扰尚未创建的HTML元素，你就会收到错误。

当DOM准备好，创建所有元素时，您看到的第一行代码将被执行;至少我可以建议你把你的window.onscroll置于JQuery代码的第一个深度和window.onload内容之前的window.onscroll在JQuery中。

我给你一个建议：

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";

}               
}

也许我在重复自己，但不要忘记document.getElementsByClassName()会返回一个HTMLElement数组，而不仅仅是一个HTMLElement（请注意Element之后的{strong> s getElementsByClassName() 1}}）

我希望我帮助过你。

答案 2 :(得分：1)

使用querySelectorAll而不是getElementsByClassName（）。

var gh = document.querySelectorAll(".module.gh");

这将返回元素数组。你需要使用索引来访问它，例如，gh [0]会给你第一个元素。查看JSFIDDLE。

检查querySelectorAll

答案 3 :(得分：1)

getElementsByClassName使用CSS类名来标识文档中的元素，这意味着它将查看每个元素的class属性。一个元素可以有一个或多个CSS类，就像我们的示例文档一样，我们有一个包含2个类module和gh的div。使用getElementsByClassName选择器，您可以使用2个CSS类中的任何一个或甚至两个选择项。 

var el = document.getElementsByClassName('module gh');
console.log(el)

这里是working version

答案 4 :(得分：1)

尝试并修改此内容：

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";
}
}

答案 5 :(得分：1)

好的，@ freshbm和@Fraizan最能回答这个问题的答案。他们告诉我使用for循环来完成由document.querySelectorAll创建的数组的每次迭代。这就是我修改代码所做的。

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";
    }
}

这很有助于解决我的问题。

相关问题
最新问题