老师,你好,关于获取元素问题,谢谢
此方法可行: // 获取元素 var getElement = function(selector){ return document.querySelector(selector); } //强制定义动画效果 var screenAnimateElements = { //第一屏有动画的元素 '.screen-1':[ '.screen-1_wrap_heading', '.screen-1_wrap_subheading', ], }; function setScreenAnimate(screenCls) { var screen = getElement(screenCls) ; //获取当前屏元素 var animateElements = screenAnimateElements[screenCls]; //需要设置动画的元素 var isSetAnimateClass = false; // 是否有初始化子元素的样式 var isAnimateDone = false; // 当前屏幕下所有子元素的状态是DONE? screen.onclick = function(){ //初始化样式 if( isSetAnimateClass === false){ //遍历每一屏需要设置动画的元素 for(var i=0;i<animateElements.length;i++){ //获取到某一屏的元素 var element = document.querySelector(animateElements[i]); //获取到某一屏的元素的class var baseCls = element.getAttribute('class'); //创建新的calss(加入初始化状态),原来的class加上新设置的class名;substr:截取字符串(把class点去掉) element.setAttribute('class',baseCls +' '+ animateElements[i].substr(1)+'_animate_init'); } isSetAnimateClass = true; return; } if(isAnimateDone === false){ for(var i=0;i<animateElements.length;i++){ var element = document.querySelector(animateElements[i]); var baseCls = element.getAttribute('class'); //.replace:替换元素,把_animate_init替换成_animate_done element.setAttribute('class',baseCls.replace('_animate_init','_animate_done')); } } } } setScreenAnimate('.screen-1');
按老师写的为什么会报错
var screenAnimateElements = { //第一屏有动画的元素 '.screen-1':[ '.screen-1_wrap_heading', '.screen-1_wrap_subheading', ], }; function setScreenAnimate(screenCls) { var screen = document.querySelector(screenCls); // 获取当前屏的元素 var animateElements = screenAnimateElements[screenCls]; var isSetAnimateClass = false; // 是否有初始化子元素的样式 var isAnimateDone = false; // 当前屏幕下所有子元素的状态是DONE? screen.onclick = function(){ //初始化样式 if( isSetAnimateClass === false){ //遍历每一屏需要设置动画的元素 for(var i=0;i<animateElements.length;i++){ //获取到某一屏的元素 var element = document.querySelector(animateElements[i]); //获取到某一屏的元素的class var baseCls = element.getAttribute('class'); //创建新的calss(加入初始化状态),原来的class加上新设置的class名;substr:截取字符串(把class点去掉) element.setAttribute('class',baseCls +' '+ animateElements[i].substr(1)+'_animate_init'); } isSetAnimateClass = true; return; } if(isAnimateDone === false){ for(var i=0;i<animateElements.length;i++){ var element = document.querySelector(animateElements[i]); var baseCls = element.getAttribute('class'); //.replace:替换元素,把_animate_init替换成_animate_done element.setAttribute('class',baseCls.replace('_animate_init','_animate_done')); } } } } setScreenAnimate('.screen-1');
// 获取元素
var getElement = function(selector){
return document.querySelector(selector);
}
var screen = getElement(screenCls) ; //获取当前屏元素
和
var screen = document.querySelector(screenCls);有什么不同,谢谢。
0
收起
正在回答
1回答
同学你好,
1、这边使用同学提供的两段代码分别测试,是没有任何报错的(因为同学提供的类名和老师这边的不同,测试时是使用的老师的)。
同学提到的报错是报什么错呢?可以截图过来,或者是把html、css、js代码全部都粘贴上来,这边帮助测试。
2、两种获取元素的方式没有什么不同。封装的getElement方法也是使用querySelector获取元素。
如果帮助了你,欢迎采纳~祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星