如何使用“;getElementsByClassName"从同一个元素中获取多个类
How to use "getElementsByClassName" to get multiple classes from same element
我写了一些js来按类名获取元素，但我要针对的元素有两个类。
<div class="module gh">
这是我用来尝试针对这个类的脚本。
var gh = document.getElementsByClassName("module gh");
由于某种原因，我得到了错误"Uncaught TypeError:Cannot set property'-webkit animation'of undefined"，这表明找不到该类。我需要在这里做什么？
这是完整的代码，如果有人愿意帮助我清理并分享他们为什么会做出更改，我将非常感激
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');
});
您有以下的数组结果
var gh = document.getElementsByClassName("module gh");
因为您有多个带有CCD_ 1的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";
}
}
根据W3C HTML5规范，您的方法应该可以工作。此外，请记住，使用具有未知类名的document.getElementsByClassName()会返回一个空数组，因此它永远不会是null（请参阅上一个if）。
Teemu关于JQuery的评论是正确的，但考虑到你是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";
}
}
也许我重复了一遍，但不要忘记document.getElementsByClassName()返回的是HTMLElement的数组，而不仅仅是HTMLElement（注意getElementsByClassName()中Element后面的s）
我希望我帮助了你。
class="module gh"0使用CSS类名来识别文档中的元素，这意味着它将查看每个元素的class属性。一个元素可以有一个或多个CSS类，比如在我们的示例文档中，我们有一个div，它有两个类module和gh。使用getElementsByClassName选择器，您可以使用两个CSS类中的任何一个，甚至同时使用这两个选择项。
var el = document.getElementsByClassName('module gh');
console.log(el)
这是的工作版本
使用querySelectorAll而不是getElementsByClassName（）。
var gh = document.querySelectorAll(".module.gh");
这将返回元素数组。您需要使用索引来访问它，例如，gh[0]将为您提供第一个元素。检查JSFIDDLE。
check querySelectorAll
尝试并修改此：
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";
}
}
好吧，这个问题的答案由@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";
}
}
这很好地解决了我的问题。
相关文章：
- React - 从 DOM 元素获取组件以进行调试
- 如何使用 JQuery 从相对元素获取 html 文本
- 从同一域上的 iframe 中的元素获取值
- 使用本机 Javascript 从 DOM 元素获取选择器字符串
- 使用jquery从另一个元素获取使用id的输入的id
- 如何从角度元素获取编译的节点值
- 如何为不同的元素获取不同的父类
- 从 jQuery 中的子元素获取父 tr 元素
- 当浮点部分为空时，从 JQuery 中的输入元素获取数字值不起作用
- 从 XML 元素获取文本
- 从音频元素获取音频样本
- 从所选元素 html 上方的元素获取属性值
- 使用 jQuery.data 从 dom 元素获取布尔值
- 如何通过jquery从某个元素获取部分文本
- 从输入元素获取表单和表单数据对象
- 从动态元素获取挖空视图的大小
- 从中继器循环中显示的子自定义元素获取正确的上下文.奥蕾莉亚
- 如何使用 JavaScript 或 JQuery 从输入类型=文件 html 元素获取文件名
- 从父元素获取 ID 并将它们放在数组中
- 尝试从选项元素获取 HTML
