老师,你好,关于获取元素问题,谢谢
此方法可行:
// 获取元素
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 星