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