本课内容：
1. 函数返回值：return，没有return的函数返回值是什么？
2. 函数传参、arguments（可变参、不定参）
3. arguments应用实例：任意数字求和
4. 实例：CSS函数
5. 获取非行间样式：currentStyle、getComputedStyle(obj, false)[attr]
6. 封装可重用的getStyle()函数
7. 函数传参的可读性
一、函数返回值
（1）什么是函数返回值
函数的执行结果
<script type="text/javascript"> function sum(a,b) { return a+b; } alert(sum(12,6)); </script 可以没有return
<script type="text/javascript"> function show() {
return; } alert(show()); //返回undefined </script> （2）一个函数应该只返回一种类型的值
1. 函数返回值：return，没有return的函数返回值是什么？
没有return或者return后面没有东西，都会返回undefined。
二、函数传参
可变参（不定参）：arguments（就是一个数组，存的是所有参数；）
<script type="text/javascript"> function show() { alert(arguments.length); } show(12,5); </script>
//直接弹出2；用来获取这个函数有多少个参数； 在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。
参数的个数可变，参数数组
例子1：求和
求所有参数的和
（1）简单的小例子
<script type="text/javascript"> function sum(a,b,c) { alert(a+b+c); } sum(12,5,3); </script> 可变参（不定参）：
求数组里面所有数字的和：
<script type="text/javascript"> function sum() { var result=0; var i=0; for (i=0;i<arguments.length;i++){ result+=arguments[i]; } alert(result); } sum(12,5,3,6,8,12,3,4,4,5,6); </script> 例子2：CSS函数
判断arguments.length
给参数取名，增强可读性
<style type="text/css"> #div1{width: 200px;height: 200px;background: red;} </style> <script type="text/javascript"> function css() { if(arguments.length==2){ //获取 return arguments[0].style[arguments[1]]; } else if(arguments.length==3){ //设置 arguments[0].style[arguments[1]]=arguments[2]; } } window.onload=function () { var oBtn=document.getElementById("btn1"); var oDiv=document.getElementById("div1"); oBtn.onclick=function () { //css(oDiv,"background","green"); alert(css(oDiv,"width")); } } </script></head><body> <input id="btn1" type="button" value="样式" /> <div id="div1" ></div></body>如果是上述代码的话，弹出来没有结果，原因是style只能用来读取行间样式；
<script type="text/javascript"> function css() { if(arguments.length==2){ //获取 return arguments[0].style[arguments[1]]; } else if(arguments.length==3){ //设置 arguments[0].style[arguments[1]]=arguments[2]; } } window.onload=function () { var oBtn=document.getElementById("btn1"); var oDiv=document.getElementById("div1"); oBtn.onclick=function () { //css(oDiv,"background","green"); alert(css(oDiv,"width")); } } </script></head><body> <input id="btn1" type="button" value="样式" /> <div id="div1" ></div></body> 如果是这样的话就可以获取到宽度为弹出200px；
问题：如何取非行间样式(不能用来设置)？
——obj.currentStyle[attr]
<style> #div1 {width:100px; height:100px; background:red;} </style> <script type="text/javascript"> window.onload=function () { var oDiv=document.getElementById('div1');
//获取计算后的样式 //IE alert(oDiv.currentStyle.width); } </script> </head> <body> <div id="div1"></div> </body> 兼容性：（这里有问题，弹不出来！）
——getComputedStyle(obj, false)[attr]
<script type="text/javascript"> window.onload=function (){ var oDiv=document.getElementById('div1'); //获取计算后的样式(当前样式、最终样式) //IE //alert(oDiv.currentStyle.width); //FF //alert(getComputedStyle(oDiv, false).width); if(oDiv.currentStyle){ //IE alert(oDiv.currentStyle.width); //IE下弹出 } else{ //FF alert(getComputedStyle(oDiv, false).width); //FF下也可以弹出； } }</script></head><body> <div id="div1"></div></body> 下面我们把这个封装成为一个简单的函数：
<script type="text/javascript"> //哪个元素 //哪个样式 function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } window.onload=function () { var oDiv=document.getElementById('div1'); alert(getStyle(oDiv, 'backgroundColor')); //width（单一样式），fontSize（复合样式）....... } </script></head><body> <div id="div1"></div></body> 关于参数和argument：
<script type="text/javascript"> function show(a, b){ alert(arguments[0]); } show(12, 6);</script> 最后简化代码：
<script type="text/javascript"> function css(obj,attr,value) { if(arguments.length==2){ //获取 return getStyle(obj,attr); } else if(arguments.length==3){ //设置 obj.style[attr]=value; } } window.onload=function () { var oBtn=document.getElementById("btn1"); var oDiv=document.getElementById("div1"); oBtn.onclick=function () { css(oDiv,"background","green"); alert(css(oDiv,"width")); } } </script></head><body><input id="btn1" type="button" value="样式" /><div id="div1" ></div></body> 最后，这里还有关于底层的获取元素CSS值之getComputedStyle方法熟悉没有弄懂，后面有时间可以参考：
http://www.zhangxinxu.com/wordpress/?p=2378
原标题：2016年5月26日下午（妙味课堂js基础
关键词：JS
我知道了 