2016年5月26日下午(妙味课堂js基础-1笔记三)

本课内容:
1. 函数返回值:return,没有return的函数返回值是什么?
2. 函数传参、arguments(可变参、不定参)
3. arguments应用实例:任意数字求和
4. 实例:CSS函数
5. 获取非行间样式:currentStyle、getComputedStyle(obj, false)[attr]
6. 封装可重用的getStyle()函数
7. 函数传参的可读性

一、函数返回值

    (1)什么是函数返回值

      函数的执行结果

<script type="text/javascript">
        function sum(a,b) {
            return a+b;
        }
        alert(sum(12,6));
    </script

      可以没有return

<script type="text/javascript">
        function show() {
      return; } alert(show());      //返回undefined
</script>

    (2)一个函数应该只返回一种类型的值

  1. 函数返回值:return,没有return的函数返回值是什么?

    没有return或者return后面没有东西,都会返回undefined。

二、函数传参

  可变参(不定参):arguments(就是一个数组,存的是所有参数;)

<script type="text/javascript">
        function show() {
            alert(arguments.length);
        }
        show(12,5);
    </script>
//直接弹出2;用来获取这个函数有多少个参数;

    在函数代码中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们。

    参数的个数可变,参数数组

  例子1:求和

    求所有参数的和

    (1)简单的小例子

<script type="text/javascript">
        function sum(a,b,c) {
            alert(a+b+c);
        }
        sum(12,5,3);
    </script>

  可变参(不定参):

    求数组里面所有数字的和:

 <script type="text/javascript">
        function sum() {
           var result=0;
            var i=0;
            for (i=0;i<arguments.length;i++){
                result+=arguments[i];
            }
            alert(result);
        }
        sum(12,5,3,6,8,12,3,4,4,5,6);
    </script>

  例子2:CSS函数

    判断arguments.length

    给参数取名,增强可读性

<style type="text/css">
        #div1{width: 200px;height: 200px;background: red;}
    </style>
    <script type="text/javascript">
       function css() {
           if(arguments.length==2){     //获取
               return  arguments[0].style[arguments[1]];
           }
           else  if(arguments.length==3){       //设置
               arguments[0].style[arguments[1]]=arguments[2];
           }
       }
        window.onload=function () {
            var oBtn=document.getElementById("btn1");
            var oDiv=document.getElementById("div1");
             oBtn.onclick=function () {
                 //css(oDiv,"background","green");
                 alert(css(oDiv,"width"));
             }
        }
    </script>
</head>
<body>
    <input id="btn1"  type="button" value="样式" />
    <div id="div1" ></div>
</body>

如果是上述代码的话,弹出来没有结果,原因是style只能用来读取行间样式;

<script type="text/javascript">
       function css() {
           if(arguments.length==2){     //获取
               return  arguments[0].style[arguments[1]];
           }
           else  if(arguments.length==3){       //设置
               arguments[0].style[arguments[1]]=arguments[2];
           }
       }
        window.onload=function () {
            var oBtn=document.getElementById("btn1");
            var oDiv=document.getElementById("div1");
             oBtn.onclick=function () {
                 //css(oDiv,"background","green");
                 alert(css(oDiv,"width"));
             }
        }
    </script>
</head>
<body>
    <input id="btn1"  type="button" value="样式" />
    <div id="div1" style="width: 200px;height: 200px;background: red;"></div>
</body>

  如果是这样的话就可以获取到宽度为弹出200px;

    问题:如何取非行间样式(不能用来设置)? 

      ——obj.currentStyle[attr]

  <style>
        #div1 {width:100px; height:100px; background:red;}
    </style>
    <script type="text/javascript">
        window.onload=function () {
            var oDiv=document.getElementById('div1');
      //获取计算后的样式   //IE alert(oDiv.currentStyle.width); }
</script> </head> <body> <div id="div1"></div> </body>

  兼容性:(这里有问题,弹不出来!)

      ——getComputedStyle(obj, false)[attr]

<script type="text/javascript">
    window.onload=function (){
      var oDiv=document.getElementById('div1');
      //获取计算后的样式(当前样式、最终样式)
      //IE
      //alert(oDiv.currentStyle.width);
      //FF
      //alert(getComputedStyle(oDiv, false).width);
      if(oDiv.currentStyle){
          //IE
         alert(oDiv.currentStyle.width);    //IE下弹出
      }
      else{
          //FF
          alert(getComputedStyle(oDiv, false).width);  //FF下也可以弹出;
      }
    }
</script>
</head>
<body>
    <div id="div1"></div>
</body>

  下面我们把这个封装成为一个简单的函数:

<script type="text/javascript">
    //哪个元素
    //哪个样式
        function getStyle(obj, attr) {
            if(obj.currentStyle) {
                return obj.currentStyle[attr];
            }
            else {
                return getComputedStyle(obj, false)[attr];
            }
        }
        window.onload=function () {
            var oDiv=document.getElementById('div1');
            alert(getStyle(oDiv, 'backgroundColor'));  //width(单一样式),fontSize(复合样式).......
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>

   关于参数和argument:

<script type="text/javascript">
    function show(a, b){
    alert(arguments[0]);
    }
    show(12, 6);
</script>

  最后简化代码:

<script type="text/javascript">
        function css(obj,attr,value) {
            if(arguments.length==2){     //获取
                return getStyle(obj,attr);
            }
            else  if(arguments.length==3){       //设置
                obj.style[attr]=value;
            }
        }
        window.onload=function () {
            var oBtn=document.getElementById("btn1");
            var oDiv=document.getElementById("div1");
            oBtn.onclick=function () {
                css(oDiv,"background","green");
                alert(css(oDiv,"width"));
            }
        }
    </script>
</head>
<body>
<input id="btn1"  type="button" value="样式" />
<div id="div1" style="width: 200px;height: 200px;background: red;"></div>
</body>

   最后,这里还有关于底层的获取元素CSS值之getComputedStyle方法熟悉没有弄懂,后面有时间可以参考:

    http://www.zhangxinxu.com/wordpress/?p=2378

posted @ 2016-05-26 15:23  zzjeny  阅读(323)  评论(0编辑  收藏  举报