<!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>标签的背景颜色设置成绿色的。