通过单击更改 HTML 背景颜色 - HTML

HTML 是一个强大的前端开发语言，可以通过它轻松地创建网页并使其拥有吸引人的外观。如果你正在寻找一种方法来让用户通过单击按钮更改页面背景颜色，那么你来对地方了！

HTML 中的按钮元素

HTML 中的按钮元素有多种，其中最常见的两种类型是 button 和 input。 它们都需要在 HTML 中定义并添加相应的事件处理程序。

button 元素

button 元素定义一个按钮，它可以由用户单击以执行某些任务。 要创建一个按钮元素，请使用以下代码：

<button>Click me</button>

input 元素

input 元素定义了一个单行文本输入框，该文本框通常用于从用户收集数据。 对于创建一个按钮元素，需要在输入元素的 type 属性中设置为 button，如下所示：

<input type="button" value="Click me">

改变背景颜色

要更改 HTML 页面的背景颜色，可以使用以下 CSS 样式：

body {
    background-color: #f0f0f0;
}

你可以将任何合法的颜色值替换为上面的 #f0f0f0。要允许用户更改页面的背景颜色，你可以编写一个 JavaScript 函数来轮流更改 body 标签的背景颜色。 以下是可以使用的示例代码：

<button onclick="changeBgColor()">Click me</button>

<script>
    function changeBgColor() {
        var body = document.querySelector("body");
        var colors = ["#f0f0f0", "#e6e6e6", "#dcdcdc", "#d3d3d3"];
        var random_color = colors[Math.floor(Math.random() * colors.length)];
        body.style.backgroundColor = random_color;
    }
</script>

结论

通过编写一个简单的 JavaScript 函数，你可以为你的用户提供更改背景颜色的功能。 这是一个简单但有效的 HTML 小把戏，可以为你的网页增加一些趣味性和互动性。