填坑系列--通过.和[]获取属性值的区别

填坑系列--通过.和[]获取属性值的区别

---

昨天用原生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.看权威指南第四章和第六章；