填坑系列--通过.和[]获取属性值的区别
昨天用原生js,写了一个获取元素具体信息值的getStyle函数,今天拿来测试,发现始终返回undefined,一顿debug,发现第9行,表达式计算过后,始终返回undefined。
function getStyle(ele,attr){
var val = null,reg = null;
//判断是否为标准浏览器
if("getComputedStyle" in window){
val = window.getComputedStyle(ele,attr)[attr]; //修改过了,原来是.attr
}else{
//在非标准浏览器下对opacity属性,进行处理
if(attr==="opacity"){
val = ele.currentStyle.filter;
reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i
val = reg.test(val)?reg.exec(val)[1]/100:1;
}else{
val = ele.currentStyle[attr];
}
}
console.log(val);
//去单位
reg = /^(-?\d+(\.\d+)?)(px|pt|em|rem)?$/i;
return reg.test(val)?parseFloat(val):val;
}
刚开始怀疑是getComputedStyle()方法写错了,复制到控制台,完美输出;于是怀疑是attr属性是字符串引起的,把val =window.getComputedStyle(ele,attr).attr改成val =window.getComputedStyle(ele,attr).height;这次结果就输出了,但是要怎么解决属性是字符串的问题,goole 获取属性值+字符串发现原来原来通过. 和[]获取属性值是有区别的;总结起来就是.后面需要直接跟对象里面的属性名称,e而不能通过是通过变量获取到的,[]里面可以是字符串或者变量,它可以通过变量获取属性名称
例如:
var obj = {name1:"xiaoming"};
var name = "name1";
obj.mame1 //"xiaoming";
obj.name // undefined 表示说name这个属性根本不存在;
//所以此时,我们可以使用
obj[name] //"xiaoming"
小结
1.这世间本都是坑,填的多了,也就少了。
2.看权威指南第四章和第六章;