使用 JavaScript 更改点击时的文本颜色

作者

目录

Change text color on click using JavaScript

  1. 单击更改文档的文本颜色
  2. 单击更改元素的文本颜色
  3. 单击更改另一个元素的文本颜色

单击更改文档的文本颜色

要在单击时更改文档的文本颜色：

  1. 向元素添加click事件侦听器。
  2. 每次单击元素时，将document.body.style.color
    属性设置为特定颜色。
  3. 除非被覆盖，否则文本颜色更改将是全局的。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>Some text here</div>
    <button id="btn">Button</button>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ Change text color globally
  document.body.style.color = 'darkgreen';

  // 👇️ Change text color for clicked element only
  // event.target.style.color = 'salmon';
});

单击更改文档文本颜色

我们click为按钮添加了一个事件侦听器，因此每次单击按钮时都会调用一个函数。

每次单击按钮时，我们都会将document.body.style.color属性设置为darkgreen并全局更改文本颜色。

单击更改元素的文本颜色

要在单击时更改元素的文本颜色：

  1. 向元素添加click事件侦听器。
  2. 将event对象分配给函数中的变量。
  3. 将event.target.style.color属性设置为特定的文本颜色。
索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ Change text color for clicked element only
  event.target.style.color = 'salmon';
});

单击更改元素文本颜色

每次单击按钮时，都会设置其自己的文本颜色。

我们在对象上使用了
目标属性event。该target属性是对调度事件的对象（元素）的引用。

换句话说event.target，我们可以访问用户点击的 DOM 元素。

您可以通过console.log该target属性查看用户单击的 DOM 元素。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  console.log(event.target);

  // 👇️ Change text color for clicked element only
  event.target.style.color = 'salmon';
});

如果单击按钮并查看console输出，您将看到
button正在记录的元素。

单击更改另一个元素的文本颜色

要在单击时更改另一个元素的文本颜色：

  1. 向其中一个元素添加一个click事件侦听器。
  2. 每次单击该元素时，都会更改style.color另一个元素的属性。

id让我们向div元素添加一个，以便我们可以选择它。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Some text here</div>
    <button id="btn">Button</button>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  const box = document.getElementById('box');

  box.style.color = 'salmon';
});

更改另一个元素的文本颜色

每次单击按钮时，我们都会将div的文本颜色更改为salmon。

–

发表评论