P06 函数传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: #d3aeae;
        }
    </style>
    <script>
        function setColor(color){
            var oDiv = document.getElementById('div1');
            oDiv.style.background = color;
        }
        /* // 以下三个方法可以用上面的一个函数来替换,只需要入参不同的值即可.
        function toRed(){
            var oDiv = document.getElementById('div1');
            oDiv.style.background = 'red';
        }
        
        function toGreen(){
            var oDiv = document.getElementById('div1');
            oDiv.style.background = 'green';
        }

        function toYellow(){
            var oDiv = document.getElementById('div1');
            oDiv.style.background = 'yellow';
        } */
        
    </script>
</head>
<body>
    <input type="button" value="变红" onclick="setColor('red')">
    <input type="button" value="变绿" onclick="setColor('green')">
    <input type="button" value="变黄" onclick="setColor('yellow')">
    <!-- ======================以下的内容注释====================== -->
    <!-- <input type="button" value="变红" onclick="toRed()">
    <input type="button" value="变绿" onclick="toGreen()">
    <input type="button" value="变黄" onclick="toYellow()"> -->
    <div id="div1"></div>
</body>
</html>

函数的入参，其实就是一个占位符。在定义的时候，这个入参的变量没有值。在调用这个函数的时候，需要为这个入参填入确定的值。

也就是说函数定义的入参，定义的时候是没有值的，只是一个占位符先站住位置，等到调用这个函数的时候需要传入确定的值。

2. 具体什么时候需要在函数中定义入参呢？

当在这个函数中有一些元素是无法确定具体的值的时候，我们就可以把这些元素定义为函数的入参。

然后在调用函数的时候确定具体的值。

举个例子说明一下：

比如我们的setColor（color）函数，是为div标签的背景变换颜色，是这个标签的背景可以任意切换成各种喜欢的颜色。

此时的标签背景的颜色是无法确定的，只有当调用这个函数的时候，传入的参数的值是什么，背景颜色才变成什么颜色。

setColor（'green'）就是将<div></div>标签的背景颜色设置成绿色的。