ピットシリーズ--通過.と[]取得属性値の違い

1346 ワード

ピットシリーズ--通過.と[]取得属性値の違い


昨日原生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"


小結
[原句]この世はもともと穴だらけで、埋めすぎて、少なくなった.2.権威あるガイドラインの第4章と第6章を見る.