<!DOCTYPE html>
<html>
<head>
<title>this is javascript</title>
<style type="text/css">
#div1{background: aqua;
height:200px;
width:200px;
}
</style>
<script type="text/javascript">
function setcolor(color){
var node=document.getElementById(‘div1‘);
node.style.background=color;
}
setcolor(‘green‘);
setcolor(‘red‘);
setcolor(‘black‘);
</script>
</head>
<body>
<input type="button" value="变绿" onclick="setcolor(‘green‘)">
<input type="button" value="变红" onclick="setcolor(‘red‘)">
<input type="button" value="变黑" onclick="setcolor(‘black‘)">
<div id="div1"></div>
</body>
</html>
//比较一下两段代码示例
<!DOCTYPE html>
<html>
<head>
<title>this is javascript</title>
<script type="text/javascript">
function toGreen(){
var node=document.getElementById(‘div1‘);
node.style.background="green";
}
function toRed(){
var node=document.getElementById(‘div1‘);
node.style.background="red";
}
function toBlack(){
var node=document.getElementById(‘div1‘);
node.style.background="black";
}
</script>
<style type="text/css">
#div1{width:200px;
height:200px;
background: red;
}
</style>
</head>
<body>
<input type="button" value="变绿" onclick="toGreen()">
<input type="button" value="变红" onclick="toRed()">
<input type="button" value="变黑" onclick="toBlack()">
<div id="div1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>this is javascript</title>
<style type="text/css">
#div1{width:200px;
height:200px;
background: red;
}
</style>
<script type="text/javascript">
function totype(name,value){
var node=document.getElementById(‘div1‘);
node.style[name]=value;
}
totype(‘width‘,‘300px‘);
totype(‘height‘,‘400px‘);
totype(‘background‘,‘aqua‘);
</script>
</head>
<body>
<input type="button" value="变宽" onclick="totype(‘width‘,‘300px‘)">
<input type="button" value="变高" onclick="totype(‘height‘,‘400px‘)">
<input type="button" value="变蓝" onclick="totype(‘background‘,‘aqua‘)">
<div id="div1"></div>
</body>
</html>
原文：http://my.oschina.net/dongdong11019/blog/493216