看看我要做什么: https://codepen.io/SomeRandomGuy0/pen/aWvGxO
我能够使用“蓝色”按钮使正方形的颜色发生变化。我想要做的是制作多个按钮,将正方形的颜色更改为按钮中显示的颜色。例如,如果我单击一个显示为“绿色”的按钮,则该正方形将变为绿色,如果我单击另一个显示为“紫色”的按钮,该正方形将变为紫色。
我正在学习 JavaScript 中的 DOM,很抱歉回答这样一个基本问题。
HTML:
<html>
<head>
<meta charset = "UTF-8" />
<title>DOM Practice</title>
</head>
<body>
<div id = 'square'></div>
<button onClick = changeColor() >Blue</button>
</body>
</html>
CSS:
#square{
width: 100px;
height: 100px;
background-color: red;
}
JavaScript:
function changeColor(){
var elem = document.getElementById( 'square' );
elem.style.backgroundColor = 'blue';
}
最佳答案
您可以在按钮调用函数时将颜色作为参数传递
检查这个密码笔
https://codepen.io/anon/pen/BRoPJo
<button onClick = changeColor('Blue') >Blue</button>
<button onClick = changeColor('green') >green</button>
<button onClick = changeColor('yellow') >yellow</button>
JS
function changeColor(color){
var elem = document.getElementById( 'square' );
elem.style.backgroundColor =color;
}
关于javascript - 如何制作多个按钮来更改不同的 div 背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43477159/