Javascript操作div颜色的改变

<!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>


你可能感兴趣的:(Javascript操作div颜色的改变)