JS中用style.和style[]有什么区别，不是用.style来获取或者设置css吗，为什么没有效果?

Question

我开始是这么写的：

function css(obj, name, value){
            // alert(obj == arguments[0]);        
            if(arguments.length == 2){            
                return obj.style.name;        
            }else{            
                obj.style.name = value;        
            }
        }
window.onload = function () {
            var oDiv = document.getElementsByTagName("div");

            for(var i=0; i<oDiv.length; i++){
                alert(css(oDiv[i], "width"));            //只能获取行内样式
                // css(oDiv[i], "background", "red");
            }
}

这样弹出来的是undifend,但是用[]写，就可以了：

function css(obj, name, value){    
            if(arguments.length == 2){        
                return obj.style[name];        
            }else{            
                obj.style[name] = value;        
            }
        }

难道不就是应该用obj.style.name这样.出来吗？而且JS里[]可以代替js里面所有的. 例：alert(json["a"])与alert(json.a)一样
我直接这样就能获取行内样式了：

var oDiv = document.getElementById("div1").style.width;
alert(oDiv);

但是这种获取改成[]又不行了，说我没有定义width：

var oDiv = document.getElementById("div1").style[width];
alert(oDiv);

为什么上面这两种写法，得到的效果还不一样？有的还一定要用[]才行？
感觉脑子突然短路了..

Answer 1

这就是带引号和不带引号的区别，[]里面是需要带引号的，也就是字符串，通常是在你不知道属性名的时候使用的，比如：

for (var key in obj) {
  console.log(obj[key]);
}

这里的key就是个属性名的字符串。而.操作符是直接跟着不带引号的属性名，所以在你使用字符串的时候会报错。

简单来说就是对象取值时有两种方式：

• 通过.操作符，obj.property
• 通过[]，obj["property"]

Answer 2

对象取值啊。 用[] 要用['width']。 前面哪个不行也是因为name 是 'width'所以用[name]才有效的