html怎么点击盒子变色

在HTML中，点击盒子变色的效果是一种非常常见且实用的交互功能，要实现这个效果，我们可以使用HTML、CSS和JavaScript三种技术相结合的方式，下面，我将详细地介绍如何实现点击盒子变色的方法。

我们需要创建一个HTML文件，并在其中定义一个盒子，这个盒子可以使用<div>标签来表示，为了方便后续的样式设置，我们可以给这个<div>标签添加一个类名，以下是HTML部分的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击盒子变色示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">点击我变色</div>
    <script src="script.js"></script>
</body>
</html>

我们需要在CSS文件中设置盒子的初始样式，我们可以设置盒子的宽度、高度、背景颜色、边框等属性，以下是CSS部分的代码：

/* style.css */
.box {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
    transition: background-color 0.3s;
}

我们已经创建了一个灰色的盒子，并且设置了鼠标悬停时的指针样式，就是核心部分——使用JavaScript来实现点击变色功能。

在JavaScript文件中，我们需要编写一个函数，用于在点击盒子时改变其背景颜色，以下是JavaScript部分的代码：

// script.js
document.addEventListener('DOMContentLoaded', function () {
    var box = document.querySelector('.box');
    box.addEventListener('click', function () {
        // 判断当前盒子的背景颜色
        var currentColor = window.getComputedStyle(box).backgroundColor;
        // 如果当前背景颜色为灰色，则点击后变为蓝色，否则变回灰色
        if (currentColor === 'rgb(240, 240, 240)') {
            box.style.backgroundColor = '#007bff';
        } else {
            box.style.backgroundColor = '#f0f0f0';
        }
    });
});

以下是详细步骤解析：

1、使用document.addEventListener('DOMContentLoaded', function (){...})确保在文档加载完成后执行代码。

html怎么点击盒子变色