老师,你好关于获取元素问题,谢谢
此方法可行:
// 获取元素
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 = getElement(screenCls) ; //获取当前屏元素
var screen = document.querySelector(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
2回答
qq_慕移动3101913
2019-10-09 22:05:40
。。。。。。
qq_慕移动3101913
2019-10-09 22:02:23
提问代码写错,请勿作答谢谢。
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星