Js学习之路三 --- 函数传参

来源：互联网发布：乐视vr 没数据编辑：程序博客网时间：2024/05/20 10:15

学习了函数之后，就要学会灵活的应用函数。学习过程中遇到了一个简单而繁琐问题：修改一个div的颜色

按照惯有思维，代码应该这样来写：

function toRed(){     //变红             var divshow = document.getElementById('div1');             divshow.style.background = red;        }function toGreen(){   //变绿             var divshow = document.getElementById('div1');             divshow.style.background = green;        } function toBlue(){   //变蓝             var divshow = document.getElementById('div1');             divshow.style.background = blue;        }  ......................此处省略一大堆

然后在点击事件中来调用这些函数，如果工作需要要求变色几百种，总不能写几百个函数吧

所以就用到参数来写：

 function change(color){             var divshow = document.getElementById('div1');             divshow.style.background = color;              //第一种操作属性方法             //divshow.style['background'] = color;             //第二种操作属性方法      }

前端代码：

<!DOCTYPE html><html>      <head>           <meta http-equiv="content-type" content="text/html;charset=utf-8">           <meta name="author" content="zsh">           <meta name="keywords" content="">           <meta name="description" content="">           <title>变色</title>           <style type="text/css">           #div1 {            width: 200px;            height: 100px;            border:1px solid #999;            display: block;            background: red;           }            </style>     </head>     <body>      <input value="变红" type="button" id="" onclick="change('red');">      <input value="变绿" type="button" id="" onclick="change('green');">      <input value="变灰" type="button" id="" onclick="change('grey');">      <input value="变黑" type="button" id="" onclick="change('black');">        <div id="div1">            啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦        </div>     </body>     <script type="text/javascript">       function change(color){             var divshow = document.getElementById('div1');             divshow.style.background = color;       }     </script></html>

这样一个函数，然后在行间调用，传入参数即可。

在这里再多说点：操作属性方法有两种——
1.第一种是通过‘.’来连接，即：

divshow.style.background = color;        //第一种操作属性方法

2.第二种：

divshow.style['background'] = color;       //第二种操作属性方法

当属性值不固定的时候，用第二种比较OK！

如：在一个函数里，我改变div的宽度、高度、颜色

function change(name,value){         //name可为：background、width、height...         //value为：以上属性的value值             var divshow = document.getElementById('div1');             divshow.style[name] = value;             //当属性值不固定的时候      }

我在前端直接这么写：

 <input value="变黑" type="button" id="" onclick="change('background','black');"> <input value="变宽" type="button" id="" onclick="change('width','400px');"> <input value="变高" type="button" id="" onclick="change('height','400px');">

我在例子中一直操作的是 style ，没有操作className
操作className 这么写：例子：首先在style标签中写一个名为box的样式

.box{            height: 250px;            border:1px solid #250;            display: block;            background: grey;}

然后在js函数中调用

divshow.className = 'box';

这样就把.box里的样式加到div上了！

需要注意的是：
操作style 修改的是行间样式！！！
操作style 修改的是行间样式！！！
操作style 修改的是行间样式！！！
**由于优先级原因，style行间样式优先级大于class的样式
例子：先修改元素.style.属性（修改行间样式）再修改className不会有效果
在同一函数中尽量使用一种（style或者className）以避免出现问题！**

阅读全文

0 0