Javascript函数传参

例一：单一参数传参

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>JS函数传参</title>
 6 <style type="text/css">
 7     html,body,div,ul,li,h1{padding: 0;margin: 0;}
 8     li{list-style: none;}
 9     a{text-decoration: none;color: #ccc;font-size: 12px;}
10     #colorchange{background: red;width: 200px;height: 100px;margin-left: 3px;}
11 </style>
12 <!-- 样式  end -->
13 <script type="text/javascript">
14     function funname(color){   //参数color在函数定义阶段没有具体的值，只是一个占位符
15         var div01= document.getElementById('colorchange');
16         div01.style.background=color;    //不可以加引号
17     }
18 </script>
19 <!-- JS函数传参 end -->
20 </head>
21 <body>
22 <button onclick="funname('red')">变红</button>
23 <button onclick="funname('green')">变绿</button>
24 <button onclick="funname('yellow')">变黄</button>
25 <div id="colorchange"></div>
26 </body>
27 </html>
单一参数传参

例二：多个参数传参&第二种操作属性的方式

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>JS函数传参</title>
 6 <style type="text/css">
 7     html,body,div,ul,li,h1{padding: 0;margin: 0;}
 8     li{list-style: none;}
 9     a{text-decoration: none;color: #ccc;font-size: 12px;}
10     #colorchange{background: red;width: 200px;height: 100px;margin-left: 3px;}
11 </style>
12 <!-- 样式  end -->
13 <script type="text/javascript">
14     function funname(name,value){   //name与value分别为属性名与值
15         var div01= document.getElementById('colorchange');
16         div01.style[name]=value;  //div01.style[name]为第二种操作属性的方法(好处是值不固定,可以传参,甚至使用变量)  第一种为div01.style.width
17     }
18 </script>
19 <!-- JS函数传参 end -->
20 </head>
21 <body>
22 <button onclick="funname('width','400px')">变宽</button>
23 <button onclick="funname('height','200px')">变高</button>
24 <button onclick="funname('background','green')">变绿</button>
25 <div id="colorchange"></div>
26 </body>
27 </html>
多个参数

例二：改变input的value——第二种操作属性的方式实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>JS函数传参</title>
 6 <style type="text/css">
 7     html,body,div,ul,li,h1{padding: 0;margin: 0;}
 8     li{list-style: none;}
 9     a{text-decoration: none;color: #ccc;font-size: 12px;}
10     #colorchange{background: red;width: 200px;height: 100px;margin-left: 3px;}
11 </style>
12 <!-- 样式  end -->
13 <script type="text/javascript">
14     // function funname(){   //固定值
15     //     var div01= document.getElementById('valueChange');
16     //     div01.value='第一次测试';
17     // }
18     // function funname(value){     //传参
19     //     var div01= document.getElementById('valueChange');  
20     //     div01.value=value;
21     // }
22     // function funname(name){   
23     //     var div01= document.getElementById('valueChange');
24     //     div01[name]='第三次测试';
25     // }
26     function funname(){   
27         var a='value';   //定义变量a  存储value的值
28         var div01= document.getElementById('valueChange');
29         div01[a]='第四次测试';
30     }
31 </script>
32 <!-- JS函数传参 end -->
33 </head>
34 <body>
35 <input id="valueChange" type="text" />
36 <!-- <input type="button" onclick="funname()" value="改变文字" /> -->
37 <!-- <input type="button" onclick="funname('第二次测试')" value="改变文字" /> -->
38 <!-- <input type="button" onclick="funname('value')" value="改变文字" /> -->
39 <input type="button" onclick="funname()" value="改变文字" />
40 </body>
41 </html>
改变input的value

 

知识点：

1、函数传参：

　　A、参数：就是一个占位符

      B、好处：是函数更加灵活易用

      C、什么时候用：属性或值无法固定

2、第二种操作属性的方式

      第一种为“.”  例子:　document.getElementById()

      第二种为“[]”  中括号。值不固定，可以传参甚至是变量。用“.”的地方都可以用“[]"。例子：div01[name]='第三次测试';

 

posted @ 2013-12-31 14:04  cubepuss  阅读(761)  评论(0)    收藏  举报