老师,你好,关于获取元素问题,谢谢

老师,你好,关于获取元素问题,谢谢

此方法可行:
// 获取元素
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);有什么不同,谢谢。

   


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,

1、这边使用同学提供的两段代码分别测试,是没有任何报错的(因为同学提供的类名和老师这边的不同,测试时是使用的老师的)。

http://img1.sycdn.imooc.com//climg/5d9e96490964a28004810277.jpg

同学提到的报错是报什么错呢?可以截图过来,或者是把html、css、js代码全部都粘贴上来,这边帮助测试。

2、两种获取元素的方式没有什么不同。封装的getElement方法也是使用querySelector获取元素。

如果帮助了你,欢迎采纳~祝学习愉快~

  • qq_慕移动3101913 提问者 #1
    再次测试已没问题,谢谢老师。
    2019-10-14 11:11:54
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师