JavaScript初探二

最新推荐文章于 2024-09-12 23:28:34 发布

可芭乐

最新推荐文章于 2024-09-12 23:28:34 发布

阅读量269

点赞数

分类专栏： JavaScript基础文章标签： javascript 函数

本文链接：https://blog.csdn.net/a839371666/article/details/54412327

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

函数参数传递

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

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

其中οnclick=”setColor()”改变为οnclick=”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';
}
4、function 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>