变绿变宽变高

如果单单要做出更改一个div的颜色宽高，javascript的实现会很简单，但是写完后，会不会发现写了三个十分相似的函数，对，我们要合并它，尽量减少代码的冗余，也方便以后的修改，让你的代码更灵活。

下面我们看两种属性的赋值方法。

(1)odiv.style.background="green";

(2)odiv.style['background'}="green";

如果你单单要做一个赋值操作的话，那么这两种方法是没有区别的。大概你已经想问，那什么时候有区别呢？不要着急，先来看这段代码

/*改变div的背景(div的id为box)*/

function changeColor(color)

{

var odiv = document.getElementById('box');

odiv.style.background = color;

}

//写完这个函数你会发现，无论你想改成什么颜色，传参数过来就ok，changeColor(‘black’)，changeColor(‘green’)，

都可以，好，回到主题，我们不仅仅要改变它的颜色，它的别的属性我也想改变，

function setStyle(name,value)

{

var odiv = document.getElementById('box');

odiv.style.name= value;//运行一下你会发现这是错的。

}

ok，显然，现在我们已经不能像之前那么写了，回到文章的最开始，你会看到我们写的两种属性的不同赋值方法。

第二种就是这个时候用的。一个小小的修改。

function setStyle(name,value)

{

var odiv = document.getElementById('box');

odiv.style[name]= value;

//当然，你也可以写成odiv[‘style’][name]= value;

}

总结一下：第一种方法能实现的第二张都可以实现，而第二种能实现的第一种不一定能实现，也就是说，第二种属性赋值方法功能更强大，当然，通常我们会更青睐于第一种，大多数情况下我们都是这么写的。

最后，献上我的原代码，仅供参考。