第三节 深入JavaScript
Posted han-bky
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第三节 深入JavaScript相关的知识，希望对你有一定的参考价值。
函数的返回值：（把函数体内的数据传出到函数体外）
什么是函数的返回值：函数执行结果、可以没有返回值
一种函数应该只返回一种类型的值
函数传参：（与函数返回值相反，把外面数据传入函数体内）
可变参（不定参）arguments：参数的个数可变，如参数数组，例如：求所有参数的和、判断arguments.length、给参数取名，增强可读性；
function sum() { //对所有参数求和
var result=0;
for (var i=0; i<arguments.length; i++){
result+=arguments[i];
}
return result;
}
alert(sum(12,4,6,72,8,3,7,4,68,8));
//CSS函数
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‘)
};
<div id="div1" style="width:200px; height:200px; border:1px solid black; background:red"></div>
//上面代码可以修改为：
function css(obj, name, value){
if (arguments.length==2){ //传入两个参数，表示获取元素
return obj.style[name];
}else{ //传入三个参数，表示修改元素值
obj.style[name]=value;
}
}
取非行间样式：（上述代码中style只能取行间的样式，而非行间的，或者是外部样式表中的样式都取不了）
currentStyle用于获取非行间样式或外部样式表中的样式，alert(oDiv.currentStyle.width); 注意：currentStyle只支持IE，Chromee，FF（火狐）不兼容。
getComputedStyle(对象名, 任何值).样式名，用于火狐、谷歌、IE9以上等浏览器获取行间样式；例如：alert(getComputedStyle(oDiv, false).width);
//我们要处理这种兼容问题，可以使用以下方法：
if (oDiv.currentStyle) {
alert(oDiv.currentStyle.width); //IE
}else {
alert(getComputedStyle(oDiv, false).width); //Chrome、FF
}
//或者把上面获取样式封装成一个函数，放入自己的JS文件内，之后只需调用即可
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
}else {
return getComputedStyle(obj, false)[name];
}
}
alert(getStyle(oDiv, ‘width‘)); //调用
需要注意的是，上述获取样式的几个方法中有个小缺陷，它们只能获取“单一/简单样式