如何使用两个按钮的 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;
}