填坑系列--通過.和[]獲取屬性值的區(qū)別

昨天用原生js，寫了一個獲取元素具體信息值的getStyle函數(shù),今天拿來測試，發(fā)現(xiàn)始終返回undefined,一頓debug,發(fā)現(xiàn)第9行，表達式計算過后，始終返回undefined。

function getStyle(ele,attr){
var val = null,reg = null;
//判斷是否為標(biāo)準(zhǔn)瀏覽器
if("getComputedStyle" in window){
    val = window.getComputedStyle(ele,attr)[attr];  //修改過了，原來是.attr
    }else{
//在非標(biāo)準(zhǔn)瀏覽器下對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()方法寫錯了，復(fù)制到控制臺，完美輸出；于是懷疑是attr屬性是字符串引起的，把val =window.getComputedStyle(ele,attr).attr改成val =window.getComputedStyle(ele,attr).height;這次結(jié)果就輸出了，但是要怎么解決屬性是字符串的問題，goole 獲取屬性值+字符串發(fā)現(xiàn)原來原來通過. 和[]獲取屬性值是有區(qū)別的；總結(jié)起來就是.后面需要直接跟對象里面的屬性名稱，e而不能通過是通過變量獲取到的，[]里面可以是字符串或者變量，它可以通過變量獲取屬性名稱

例如：

var obj = {name1:"xiaoming"};

var name = "name1";

obj.mame1   //"xiaoming"；
obj.name    // undefined  表示說name這個屬性根本不存在；

//所以此時，我們可以使用
obj[name]     //"xiaoming"

小結(jié)

1.這世間本都是坑，填的多了，也就少了。
2.看權(quán)威指南第四章和第六章；