JavaScript入门之函数返回值

函数返回值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function show(){
            return 12;
        }
        var a=show();
        alert(a);
    </script>
</head>
<body>

</body>
</html>

加法器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function add(a,b){
            return a+b;
        }

        alert(add(3,5));
    </script>
</head>
<body>

</body>
</html>

注意：return无值时，弹出undefined

求和 arguements可变参数组（不定参）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function sum()
        {
            var result=0;
            for(var i=0;i<arguments.length;i++){
                result+=arguments[i];
            }
            return result;
        }
        alert(sum(12,6,9))
    </script>
</head>
<body>

</body>
</html>

css（oDiv,'width'）获取样式

css(oDiv,'width','200px')设置样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function css(){
            if(arguments.length==2)//获取 如果有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');设置成绿色

} </script> </head> <body> <div id="div1" style="width:200px;height:200px;background: red"></div> </body> </html>

简化，给函数取名

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function css(obj,name,value)
        {if(arguments.length==2)//获取 如果有2个参数
            {
                return obj.style[name];
            }
            else{//设置
                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>
</html>

style用于获取行间样式，

获取非行间样式用current，currentStyle只适用于ie浏览器，getComputedStyle适用于火狐和Chrome

<!doctype html><html>
<head>
<title>获取非行间样式</title>
<meta charset="utf-8"/>
<style>#div1{width:200px;height:200px;background:red;}</style>
<script>
    window.onload=function(){
    //ie 
    //alert(oDiv.currentStyle.width);
    var oDiv=document.getElementById('div1');
    //火狐，Chrome
    alert(getComputedStyle(oDiv,false).width);
    }
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

解决兼容性用if else

<!doctype html><html>
<head>
<title>获取非行间样式</title>
<meta charset="utf-8"/>
<style>#div1{width:200px;height:200px;background:red;}</style>
<script>
    window.onload=function(){

    var oDiv=document.getElementById('div1');
    if(oDiv.currentStyle){//ie
    var oDiv=document.getElementById('div1');
    }
    else{//firefox,chrome
    alert(getComputedStyle(oDiv,false).width);
    };}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

包装成独立的函数

<!doctype html><html>
<head>
<title>获取非行间样式</title>
<meta charset="utf-8"/>
<style>#div1{width:200px;height:200px;background:red;}</style>
<script>
function getStyle(obj,name){
    if(obj.currentStyle){//ie
    return obj.currentStyle[name];
    }
    else{//firefox,chrome
    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>
</html>

复合样式：background（color,image,position）

单一样式：width，height

    alert(getStyle(oDiv,'backgroundColor'));

posted @ 2016-10-28 18:06 缘琪梦阅读(308) 评论(0) 编辑收藏举报

缘琪梦

JavaScript入门之函数返回值

公告