如何更改 html 元素的颜色

【问题标题】：How do you change the color of a html element如何更改 html 元素的颜色
【发布时间】：2021-03-03 22:20:37
【问题描述】：

如何通过单击按钮更改 html 元素的颜色我正在制作一个游戏，需要这个来改变玩家的颜色编辑以后看到这个的任何人我都想做的是获取一个 Html 元素并通过单击按钮更改其颜色如果您不明白这里是视觉效果

如果你运行这段代码，它会显示一个红色框和一个按钮

<!DOCTYPE html>
<html>
    <body>
        <div id="player" style="background:blue;height: 200px;width: 100px;">
            <button> Change Color </button>
    </body>
    </html>

【问题讨论】：

标签： javascript html button colors element

【解决方案1】：

在下面的代码中，我有一个带有背景颜色、高度和宽度的普通 div。我还有一个带有 onclick 功能的按钮，该按钮在 javascript 代码中定义（在脚本标签之间）。单击按钮时，我正在调用“changeCol”函数。在 changeCol 函数中，我通过查找 id 为“myDiv”的元素来获取 div，然后使用 .style 指定我要更改元素的样式，并使用 .background 更改背景颜色。

<!DOCTYPE html>
<html>
<body>
    <div id="myDiv" style="background:red;height: 200px;width: 100px;">
    </div>
    <button onclick="changeCol()">Click me</button>

   <script>
     function changeCol() {
         document.getElementById("myDiv").style.background = "yellow";
     }
    </script>
</body>
</html>

【讨论】：