三、深入Javascript(1)_看智能社blue老师JS视频整理的笔记

1、函数返回值 ( return )

function show()
{
return 12;
};
alert(show());//弹出12

（1）return就是函数返回值，作用把东西返回到函数外面来，在哪调用返回到哪

（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'));

秒客网