你的位置:首页 > Java教程

[Java教程]2016年5月26日下午(妙味课堂js基础


本课内容:
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" ></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" ></div></body>

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

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