1、函数返回值 ( return )
function show() { return 12; }; alert(show()); //弹出12
(2)函数不仅可以返回数字,返回字符串,返回算式(如return a+b;求出算式结果,然后把结果给返回出去)
(3)函数参数,一次可以写多个进去,但是return返回值一次只能返回1个出去,当然有些折中的小办法,如json可以让函数同时返回多个东西,后面讲到再说
(4)函数可以没有return,结果:undefined
(5)函数返回值(函数可以把一些东西传到外面来)和函数传参(把一些东西传到函数里边去)正好相反
(6)和变量一样,一个函数最好只返回一种类型的值
2、arguments:可变参、不定参(即参数的个数是可变的,参数的个数是不定的)
function sum() { //alert(arguments.length); //alert(arguments[0]); //arguments var result=0; for(i=0;i<arguments.length;i++) { result+=arguments[i]; }; return result; }; alert(sum(13,5,6,13,5,6,13,5,6,13,5,6)); //这个例子是求所有参数的和,即13,5,6,13,5,6,13,5,6,13,5,6这些数的和</span>
注:arguments其实是一个数组,数组里面存的是传给函数的参数
3、css函数,来自于jQuery,与jQuery里边的css差不多
css(oDiv,'width')获取样式(会把样式的结果给返回出去)
css(oDiv,'width','200px') 设置样式
简单来说,css函数给两个参数是获取,给三个参数是设置
例如:
<script> function css() { if(arguments.length==2) { return arguments[0].style[arguments[1]]; }; else { return arguments[0].style[arguments[1]]=arguments[2]; }; }; window.onload=function () { var oDiv=document.getElementById('div1'); //alert(css(oDiv,'width')); //两个参数,获取样式 css(oDiv,'background','green'); //三个参数,设置样式 }; </script> </head> <body> <div id="div1" style="width:200px; height:200px; background:red;"> </div> </body>
上面例子的简写:
<script> function css(obj,name,value) { //alert(obj==arguments[0]); if(arguments.length==2) { return obj.style[name]; }; else { return obj.style[name]=value; }; }; window.onload=function () { var oDiv=document.getElementById('div1'); alert(css(oDiv,'width')); //css(oDiv,'background','green'); }; </script> </head> <body> <div id="div1" style="width:200px; height:200px; background:red;"> </div> </body>
4、获取非行间样式
<style> #div1 {width:200px; height:200px; background:red;} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); //alert(oDiv.style.width); //style只能用来获取行间样式 //IE(currentStyle用来获取非行间样式,只兼容IE和高版本的chrome) //alert(oDiv.currentStyle.width); //chrome、FF(getComputedStyle有两个参数,第一个就是你要获取哪个物体的样式,第二个参数就是个垃圾,可以写任意东西) //alert(getComputedStyle(oDiv,false).width); //alert(oDiv.currentStyle); if(oDiv.currentStyle) //*****如何让所有浏览器都兼容呢?实际上,JS里99.99%的这种兼容问题,都是通过if来解决的 { //IE alert(oDiv.currentStyle.width); } else { //chrome、FF alert(getComputedStyle(oDiv,false).width); } }; </script> </head> <body> <div id="div1"> </div> </body>
把上面的if else封装成一个函数,以后每次要用的时候,直接去调用就可以,即公用函数。得如下代码:
<style> #div1 {width:200px; height:200px; background:red;} </style> <script> function getStyle(obj,name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name]; } }; window.onload=function () { var oDiv=document.getElementById('div1'); alert(getStyle(oDiv,'width')); }; </script> </head> <body> <div id="div1"> </div> </body>
css里有两种样式:
(1) 复合样式:background、border
(2) 单一样式:width、height、position
上面的例子如果想取背景颜色,直接这样写alert(getStyle(oDiv,'background'));是取不到的,
因为currenStyle没法取复合样式,只能取单一样式,如果就想取背景颜色,那就要写成backgroundcolor,如下面
alert(getStyle(oDiv,'backgroundColor'));