如果单单要做出更改一个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;
}
总结一下：第一种方法能实现的第二张都可以实现，而第二种能实现的第一种不一定能实现，也就是说，第二种属性赋值方法功能更强大，当然，通常我们会更青睐于第一种。
最后，献上我的原代码，仅供参考。
原文：http://blog.csdn.net/smallsun_229/article/details/46316693