2016年5月26日下午（妙味课堂js基础-1笔记三）
本课内容：
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" style="width: 200px;height: 200px;background: red;"></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" style="width: 200px;height: 200px;background: red;"></div>
</body>
最后，这里还有关于底层的获取元素CSS值之getComputedStyle方法熟悉没有弄懂，后面有时间可以参考：
浙公网安备 33010602011771号