js 按钮控制div变色（函数传参） 

<style type="text/css" >
    #div1{width: 200px; height: 200px; background-color: aqua;}
</style>
<script type="text/javascript">
function toGreen(){
    var odiv = document.getElementById('div1');
    odiv.style.background='green';
}
function toyellow(){
    var odiv = document.getElementById('div1');
    odiv.style.background='yellow';
}
function toblack(){
    var odiv = document.getElementById('div1');
    odiv.style.background='black';
}
</script>
</head>
<body>
 <input type="button" value="变绿" onclick="toGreen()">
 <input type="button" value="变黄" onClick="toyellow()">
 <input type="button" value="变黑" onClick="toblack()" >
  <div id="div1">
  </div>
</body>

修改，练习函数传参

<style type="text/css" >
    #div1{width: 200px; height: 200px; background-color: aqua;}
</style>
<script type="text/javascript">
function getcolor(color)                                                  getcolor（color）：设置参数，无意义，相当于占位符，先占个位置
{
    var odiv = document.getElementById('div1');
    odiv.style.background=color;　　　　　　　　　　　　　　　　　　　　　　　　 当调用阶段设置属性之后，函数随之变化
}
</script>
</head>
<body>
 <input type="button" value="变绿" onclick="getcolor('green')">           在掉用这里，设置需要的属性，函数的参数就会随着变化
 <input type="button" value="变黄" onClick="getcolor('yellow')">
 <input type="button" value="变黑" onClick="getcolor('black')" >
  <div id="div1">
  </div>
</body>

同样实现相同效果

posted @ 2017-10-08 15:37  沃泽法克  阅读(1081)  评论(0)    收藏  举报