ピットシリーズ--通過.と[]取得属性値の違い
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章を見る.
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;
}
var obj = {name1:"xiaoming"};
var name = "name1";
obj.mame1 //"xiaoming";
obj.name // undefined name ;
// ,
obj[name] //"xiaoming"