写了一个动画函数,发现如果将elm.style[attr]改为elm.style.attr后;函数就失去作用了,why?
function animation(elm,attr,from,to){
var distance = Math.abs(to - from);
var attr = attr;
//假设动画50ms一次
var stepLength = distance / 50;
var sign = (to - from) / distance;
var offset = 0;
function step(){
offset = offset + stepLength;
if(offset < distance){
elm.style[attr] = from + offset * sign + 'px';
} else {
elm.style[attr] = to + 'px';
clearInterval(Interval);
}
}
var Interval = setInterval(step, 20);
}
attr 是变量名,或者说是函数参数,最终生效的是传进来的字符串,比如 'width',那么会被替换成 style['width']
相当于style.width
但style.attr
则不会把attr 当作变量处理,style 没有 attr 这个属性当然会出错。
elm.style.attr
相当于elm.style["attr"]
,这个和elm.style[attr]
是有差别的,自己体会下
这个问题是这样的,原本elm.style
是一个对象,你想知道两种调用方式有什么不同。
JavaScript中对象属性有两种调用方式,一种是点"."
一种是"[]"
。
一般情况下我们使用点调用属性的方式,但是当obj的某个属性是一个变量时(你的attr在这里是一个字符串),这种点调用的方式就行不通了,想想看obj.'property'
这样的方式不对;
所以,如果对象内的属性是一个变量,只能使用[]调用。