如何使用两个按钮的 onClick() 事件更改 JavaScript 中的两种不同的背景颜色

Question

我必须制作两个按钮，这些按钮将在单击时更改背景颜色，第一个按钮会将背景颜色更改为黄色，另一个按钮会将背景颜色更改为浅蓝色。我做过这样的事情，

<button id="bttn1" type="button" onclick="changeColor()">Click for a yellow color</button>
<button id="bttn2" type="button" onclick="changeColor()">Click for a light blue color</button>

function changeColor() {
document.getElementById("bttn1").style.backgroundColor = "yellow";
document.getElementById("bttn2").style.backgroundColor = "light blue";
}

Answer 1

使用document.body.style.background

<script type="text/javascript">
function changeColor(color){
document.body.style.background = color;
}
</script>
<button id="bttn1" type="button" onclick="changeColor('yellow')">Click for a yellow color</button>
<button id="bttn2" type="button" onclick="changeColor('lightblue')">Click for a light blue color</button>

设置颜色

Answer 2

用于更改按钮背景

<script>
function changeColorYellow() 
{
document.getElementById("bttn1").style.backgroundColor = "yellow";
}
function changeColorLightBlue() 
{
document.getElementById("bttn2").style.backgroundColor = "LightBlue";
}
</script>

用于更改背景颜色

function changeColorYellow() {
document.querySelector('body').style.backgroundColor = "yellow";
}
function changeColorLightBlue() {
document.querySelector('body').style.backgroundColor = "LightBlue";
}

用它添加CSS

body {
height:100vh;
width:100wh;
}

并分别更改 HTML ...

Answer 3

如果您只是想更改网页的颜色，那么您可以执行以下操作

<button id="bttn1" type="button" onclick="changeColor("yellow")">Click for a yellow color</button>
<button id="bttn2" type="button" onclick="changeColor("lightblue")">Click for a light blue color</button>

function changeColor(color) {
document.body.style.backgroundColor = color;
}