本課內容：1. 函數返回值：return，沒有return的函數返回值是什麼？2. 函數傳參、arguments（可變參、不定參）3. arguments應用實例：任意數字求和4. 實例：CSS函數5. 獲取非行間樣式：currentStyle、getComputedStyle(obj, false ...
本課內容：
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方法熟悉沒有弄懂，後面有時間可以參考：
http://www.zhangxinxu.com/wordpress/?p=2378
