javascript - 关于改变行间样式函数的写法

Question

完整js代码

<script>
        //改变行间样式函数
        function changeStyle(elem,name,value) {
            elem.style[name] = value;//为什么不能写成elem.style.name = value
        }
        //执行改变属性函数
        window.onload = function () {
            var oSubmitBtn = document.getElementById("submit");
            var oResetBtn = document.getElementById("reset");
            var oInput = document.getElementsByTagName("input");
            var op = document.getElementById("p1");

            oSubmitBtn.onclick = function() {
                changeStyle(op,oInput[0].value,oInput[1].value);
            }
            oResetBtn.onclick = function() {
                op.removeAttribute("style");   
            }
        }
    </script>

问题是第一个函数内部如果改成elem.style.name = value就不行了，求解

Answer 1

你先看看下面代码，体会体会。

var obj = {
    name:"hello"
}
var a = "name";
console.log(obj.name);//hello
console.log(obj.a);//undefined
console.log(obj[a]);//hello
console.log(obj['a']);//undefined
console.log(obj['name']);//hello
console.log(obj[name]);//undefined

点操作符只能操作那个对象有的属性名，中括号中如果你传递的是变量他是要解析的，如果是字符串，点操作符能行，他也行，点操作符不行的，它也行，
例如

    var obj = {
    "aa bb":1
};
console.log(obj["aa bb"])

属性名有空格，这种情况只能用[]

Answer 2

访问属性

一个例子：有两种方式来访问对象的属性，点操作符或者中括号操作符。

var foo = {name: 'kitten'}
foo.name; // kitten
foo['name']; // kitten

var get = 'name';
foo[get]; // kitten

foo.1234; // SyntaxError
foo['1234']; // works

两种语法是等价的，但是中括号操作符在下面两种情况下依然有效

动态设置属性
属性名不是一个有效的变量名（比如属性名中包含空格，或者属性名是 JS 的关键词）。

Answer 3

很简单的一个例子
var name="__name";
var obj={};

obj[name]="1";
obj.name="2";
console.log(obj);

{
__name:"1",
name:"2"
}