（10）JS之按下不同的按钮显示不同的颜色

来源：互联网发布：单片机密码锁编程编辑：程序博客网时间：2024/06/07 00:06

调用一个函数实现不同的颜色样式设置，然后在按钮中书写onclick事件，点击的时候就可以显示相应的颜色了。

<!DOCTYPE HTML><!----><html><head><meta charset="utf-8"><title></title><style>#div1{width:200px;height:200px;background:red;}</style><script>function setColor(color){var oDiv=document.getElementById('div1');oDiv.style.background=color;}/*function toGreen(){var oDiv=document.getElementById('div1');oDiv.style.background='green';}function toBlack(){var oDiv=document.getElementById('div1');oDiv.style.background='black';}function toYellow(){var oDiv=document.getElementById('div1');oDiv.style.background='yellow';}*/</script></head><body><input type="button" value="变绿" onclick="setColor('green');"/><input type="button" value="变黄" onclick="setColor('yellow');"/><input type="button" value="变黑" onclick="setColor('black');"/><div id="div1"></div></body></html>

效果图如下：

0 0