函数返回值:
<script>
//一个函数只返回一种类型的值。
function show(a,b){
return;//undefined.如果没有return,也是 undefined
}
alert(show(3,5))
</script>
函数传参:
可变参(不定参),arguments:可以有无数个参数。
- 求和:
function sum(){
alert(arguments.length)//3
alert(arguments[0]);//12
}
alert(sum(12,6,8))
function sum(){
var result=0;
for(var i=0;i<arguments.length;i++){
result+=arguments[i];
}
return result;
}
alert(sum(12,6,8))
- css函数:如果arguments参数个数是2,获取属性。如果不是2,就是设置属性。
function css(){
if(arguments.length==2){
return arguments[0].style[arguments[1]];
}else{
arguments[0].style[arguments[1]]=arguments[2];
}
}
window.onload=function(){
var oDiv=document.getElementById('div1');
//alert(css(oDiv,'width'));
css(oDiv,'background','green');
}
<body>
<div id="div1" style="width: 200px;height: 200px;background: red"></div>
</body>
obj和arguments[0]是一样的。name和arguments[1]一样。value和arguments[2]一样。
function css(obj,name,value){
if(arguments.length==2){
return obj.style[name];
}else{
obj.style[name]=value;
}
}
- 获取非行间样式:
<script>
//获取行间样式
window.onload=function(){
var oDiv=document.getElementById('div1');
alert(oDiv.style.width);
}
</script>
<body>
<div id="div1" style="width: 200px;height: 200px;background: red"></div>
</body>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
}
</style>
//获取非行间样式
window.onload=function(){
var oDiv=document.getElementById('div1');
// alert(oDiv.style.width);//style只能操作行间样式
//alert(oDiv.currentStyle.width);//只适用于ie浏览器。
alert(getComputedStyle(oDiv,null).width);//Chrome、火狐.第二个参数往里放什么都可以。
}
</script>
<body>
<div id="div1"></div>
</body>
解决兼容性问题:很多百分之99的兼容性问题都是if解决的。
window.onload=function(){
if(oDiv.currentStyle){
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv,null).width);
}
}
我们可以把常用的功能封装成一个函数。每次我需要就调用函数。
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>
<body>
<div id="div1"></div>
</body>
存在的问题:
<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,'background'));//获取的是空的
}
</script>
<body>
<div id="div1"></div>
</body>
复合样式:background、border
单一样式:width、height、position
currentStyle和getComputedStyle是没有办法取复合样式的,只能取单一样式。
把 background改成backgroundColor就好了。
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,'backgroundColor'));
}
数组基础:
数组的length,既可以获取又可以设置。str.length=3;
数组的使用原则:数组中应该只存在一种类型的变量。