📌  相关文章
📜  如何使用javascript让颜色框改变颜色然后变回来 - Javascript(1)

📅  最后修改于: 2023-12-03 15:38:06.964000             🧑  作者: Mango

如何使用 JavaScript 让颜色框改变颜色然后变回来

在前端开发中，动态改变网页元素的样式是非常常见的操作。在这篇教程中，我们会为大家介绍如何使用 JavaScript 来实现一个让颜色框改变颜色然后变回来的效果。

HTML 结构

首先，我们需要在 HTML 中定义一个具有颜色框的元素。下面是一个简单的示例，我们可以在该元素中添加一个按钮，通过点击按钮来触发颜色变化的代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Change Color</title>
    <style>
      #color-box {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="color-box"></div>
    <button id="color-btn">Change Color</button>
    <script src="./change-color.js"></script>
  </body>
</html>
JavaScript 实现

现在我们需要在按钮点击事件中编写代码来实现颜色变化的效果。我们可以创建一个 changeColor() 函数，该函数会在每次点击按钮时执行。在该函数中，我们可以利用 JavaScript 调用 getElementById() 方法获取 color-box 元素，然后改变其背景颜色为新的颜色。

同时，我们也可以使用一个状态变量来保存当前的颜色是什么。如果当前颜色是红色，那么我们可以将其改变为黄色，反之亦然。

下面是完整的 JavaScript 代码：

// 获取元素
const colorBox = document.getElementById('color-box');
const colorBtn = document.getElementById('color-btn');

// 初始化状态
let isRed = true;

// 定义函数
function changeColor() {
  if (isRed) {
    colorBox.style.backgroundColor = 'yellow';
  } else {
    colorBox.style.backgroundColor = 'red';
  }
  isRed = !isRed;
}

// 添加按钮点击事件
colorBtn.addEventListener('click', changeColor);
效果演示

最后，我们来看一下实现的效果：

颜色框改变效果演示

到这里，我们就成功地使用 JavaScript 实现了让颜色框改变颜色然后变回来的效果。感谢阅读！