深入js

函数返回值:

<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;

数组的使用原则:数组中应该只存在一种类型的变量。

js的内置对象之数组

猜你喜欢

转载自blog.csdn.net/weixin_40512519/article/details/82344053