JavaScript初探二

2017-01-14 08:48:27来源:CSDN作者:a839371666人点击

函数参数传递

- 函数类似,只有单个变量
固定不变的部分代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style type="text/css">    #div1 {        width: 200px;        height: 200px;        background: red;    }</style></head><body>    <input type="button" value="变绿" onclick="setColor()" />    <input type="button" value="变黄" onclick="toYellow()" />    <input type="button" value="变黑" onclick="toBlack()" />    <div id="div1"></div></body></html>

当要设置多个按钮或多种变量时,传统的函数为:

function toGreen(){        var oDiv = document.getElementById('div1');        oDiv.style.background = 'green';    }        function toYellow(){        var oDiv = document.getElementById('div1');        oDiv.style.background = 'yellow';    }        function toBlack(){        var oDiv = document.getElementById('div1');        oDiv.style.background = 'black';    }

利用参数传递:

function setColor(color){        var oDiv = document.getElementById('div1');        oDiv.style.background = color;    }

其中onclick=”setColor()”改变为onclick=”setColor(‘color’)”
注意点:括号内必须加单引号;可以在body中根据需要改变颜色

- 只有单个变量的4种js表达方式

<input id="txt1" type="text" /><input type="button" value="改变文字" onclick="setText()" />function setText(){    var oTxt = document.getElementById('txt1');    1、oTxt.value = 'asdfgh';    2、oTxt['value'] = 'asdfgh';    3、var a = 'value';    oTxt[a] = 'asdfgh';}4function setText(name){    var oTxt = document.getElementById('txt1');    oTxt[name] = 'asdfgh';}<input type="button" value="改变文字" onclick="setText('value或者是title(提示)')" />}

- 有两个变量的参数传递

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style type="text/css">    #div1 {        width: 200px;        height: 200px;        background: red;    }</style><script type="text/javascript">    function setStyle(name,value){        var oDiv = document.getElementById('div1');        oDiv.style[name] = value;    }</script></head><body>    <input type="button" value="变宽" onclick="setStyle('width','400px');" />    <input type="button" value="变高" onclick="setStyle('height','400px');" />    <input type="button" value="变绿" onclick="setStyle('background','green');" />    <div id="div1"></div></body></html>

name表示样式属性名,value为需要的样式具体化

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台