<!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>
原文：https://www.cnblogs.com/runmoxin/p/12892177.html