JavaScript函数参数

作者: EndPein | 来源:发表于2019-11-24 15:56 被阅读0次

JavaScript函数、this以及闭包
ES6 笔记箭头函数
JavaScript学习笔记(三)
2018-06-06
TypeScript函数使用
JavaScript学习笔记-3(函数)
JavaScript函数参数
JavaScript：函数参数
值传递or引用传递
系统学习 JavaScript 的笔记【4】

日常的js代码中，有很多的重复js代码，例如下面这个，我们点击不同的颜色按钮，可以将div中的颜色进行变换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>变换颜色之函数传值</title>
    <style>
        #div1 {
            width: 200px; 
            height: 100px; 
            background: red; 
            border: 1px solid #999;
   
            }
    </style>
</head>
<body>


    <div id="div1"></div>

    <input type="button" value="变绿色" onclick="toGreen()">
    <input type="button" value="变黄色" onclick="toYellow()">
    <input type="button" value="变黑色" onclick="toBlack()">

    <script type="text/javascript">

    function toGreen(){
        var div1 = document.getElementById('div1') ;
        div1.style.background = 'green';
    }

    function toYellow(){
        var div1 = document.getElementById('div1') ;
        div1.style.background = 'yellow';
    }
    function toBlack(){
        var div1 = document.getElementById('div1') ;
        div1.style.background = 'black';
    }
    </script>

</body>
</html>
'''


可以发现上面的代码中js代码基本全部是重复的，可以将js代码进行改造，改造后代码如下



```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>变换颜色之函数传值</title>
    <style>
        #div1 {
            width: 200px; 
            height: 100px; 
            background: red; 
            border: 1px solid #999;
   
            }
    </style>
</head>
<body>


    <div id="div1"></div>

    <input type="button" value="变绿色" onclick="setColor('green')">
    <input type="button" value="变黄色" onclick="setColor('yellow')">
    <input type="button" value="变黑色" onclick="setColor('black')">

    <script type="text/javascript">

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

    </script>

</body>
</html>

补充说明一下
js中操作属性的方法有2种，一种是通过.的方式去取值操作，还有一种则是通过[‘属性名’]的方式取值
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>变换颜色之函数传值</title>
    <style>
        #div1 {
            width: 200px; 
            height: 100px; 
            background: red; 
            border: 1px solid #999;
   
            }
    </style>
</head>
<body>


    <div id="div1"></div>

    <input type="button" value="变宽" onclick="setStyle('width','300px')">
    <input type="button" value="变高" onclick="setStyle('height','200px')">
    <input type="button" value="变绿" onclick="setStyle('background','green')">

    <script type="text/javascript">

    function setStyle(name,value){
        var div1 = document.getElementById('div1') ;
        div1.style[name] = value;
    }
    </script>

</body>
</html>
'''