JS Change元素的颜色onclick

基础概念

JavaScript（JS）是一种广泛使用的脚本语言，主要用于网页和网络应用的客户端编程。通过JS，开发者可以实现网页的动态效果和交互功能。onclick 是一个事件处理器，当用户点击某个元素时，会触发该事件。

类型

在JS中，改变元素颜色可以通过多种方式实现，例如直接修改元素的样式属性或使用CSS类。

应用场景

这种功能常见于各种网页应用，如按钮点击后的状态变化、用户交互反馈等。

示例代码

以下是一个简单的示例，展示如何使用JS在用户点击按钮时改变其颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Element Color on Click</title>
    <style>
        .clicked {
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="myButton">Click Me!</button>

    <script>
        document.getElementById('myButton').onclick = function() {
            this.classList.toggle('clicked');
        };
    </script>
</body>
</html>

解释

HTML部分：定义了一个按钮元素，并为其设置了ID myButton。
CSS部分：定义了一个名为 clicked 的类，用于改变按钮的背景颜色。
JS部分：通过 document.getElementById 获取按钮元素，并为其添加 onclick 事件处理器。当按钮被点击时，会切换 clicked 类的添加和移除，从而改变按钮的颜色。