HTML点击按钮改变背景颜色

<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a id="click">点击切换颜色</a>
</body>
<script>
var btn = document.getElementById("click");
var body =document.body;
let array=["#000000","#FF0000"];
let index=0;
btn.onclick = function(){
body.style.backgroundColor = array[index];
index=(index+1)%array.length;
}
</script>
</html>

代码中在此处:

let array=["#000000","#FF0000"];

修改自己要修改的颜色即可

  • 0
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的HTML代码示例,其中包含一个按钮,点击按钮时可以改变文本的颜色: ``` <!DOCTYPE html> <html> <head> <title>点击按钮改变颜色</title> <style> .color-change { color: black; background-color: yellow; padding: 10px 20px; border: none; font-size: 16px; cursor: pointer; } .color-change:hover { background-color: orange; } .red { color: red; } </style> </head> <body> <h1 id="heading">这是一个示例文本。</h1> <button onclick="changeColor()">改变颜色</button> <script> function changeColor() { var heading = document.getElementById("heading"); if (heading.classList.contains("red")) { heading.classList.remove("red"); } else { heading.classList.add("red"); } } </script> </body> </html> ``` 在这个示例中,我们首先定义了一个CSS类 `.color-change`,它定义了按钮的样式,包括背景颜色、字体大小、光标样式等等。当鼠标悬停在按钮上时,我们使用 `.color-change:hover` 来定义按钮的背景色。 在HTML的 `body` 标签中,我们定义了一个标题元素 `h1`,并给它一个 `id` 为 `heading`。我们还定义了一个按钮元素 `button`,并在其中添加了一个 `onclick` 事件处理函数 `changeColor()`。在这个函数中,我们首先获取标题元素 `heading` 的引用,然后检查它是否已经具有了 `.red` 类。如果有,我们将它从 `heading` 的 `classList` 中删除,以恢复原始的黑色颜色;如果没有,我们将 `.red` 类添加到 `heading` 的 `classList` 中,以将标题的颜色更改为红色。 通过这种方式,我们可以很容易地使用JavaScript来更改HTML元素的样式,从而实现点击按钮改变颜色的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值