使用 JavaScript 函数批量修改 Textarea 样式-js教程-PHP中文网

使用 JavaScript 函数批量修改 Textarea 样式

花韻仙語

发布： 2025-08-13 17:08:01

原创

738人浏览过

使用 javascript 函数批量修改 textarea 样式

本文旨在解决如何使用 JavaScript 函数一次性修改页面上所有 textarea 或 input[type="text"] 元素的样式。通过 querySelectorAll() 方法选取所有目标元素，并使用 forEach() 循环遍历，可以高效地批量修改样式，包括背景色、文本颜色和 placeholder 颜色。本文提供详细的代码示例和解释，帮助开发者轻松实现这一功能。

在 Web 开发中，经常需要批量修改页面上相同类型元素的样式。例如，需要一次性更改所有 textarea 或者 input[type="text"] 元素的背景色、文本颜色和 placeholder 颜色。本文将介绍如何使用 JavaScript 函数来实现这一目标，并提供详细的代码示例。

核心方法：querySelectorAll() 和 forEach()

要批量修改元素样式，首先需要选取所有目标元素。document.querySelectorAll() 方法可以根据 CSS 选择器选取所有匹配的元素，返回一个 NodeList 集合。然后，可以使用 forEach() 方法遍历 NodeList 集合，对每个元素进行样式修改。

立即学习“Java免费学习笔记（深入）”；

代码示例

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

以下是一个完整的示例，演示如何使用 JavaScript 函数批量修改 input[type="text"] 元素的背景色、文本颜色和 placeholder 颜色：

<!DOCTYPE html>
<html>
<head>
<style>
::placeholder {
  color: var(--c, #808080);
}

input[type="text"] {
  background-color: #FFFFFF;
  color: #000000;
}
</style>
</head>
<body>

<input type="text" placeholder="Type Here">
<input type="text" placeholder="Type Here">
<button onclick="setColor()">change</button>

<script>
var bgColors = ["#FFFFFF", "#80C040", "#00FFFF", "#000000", "#000000"];
var textColors = ["#000000", "#000000", "#000000", "#FF0000", "#FFFF00"];
var phColors = ["#808080", "#406020", "#008080", "#800000", "#808000"];
var idx = 0; //index
function setColor() {
  if (idx == 4) {
    idx = 0;
  } else {
    idx = idx + 1;
  }
  document.querySelectorAll('input[type=text]').forEach(el => {
    el.style.backgroundColor = bgColors[idx];
    el.style.color = textColors[idx];
    el.style.setProperty("--c", phColors[idx]);
  });
}
</script>

</body>
</html>

登录后复制

代码解释

HTML 结构： 包含两个 input[type="text"] 元素和一个按钮，点击按钮会触发 setColor() 函数。
CSS 样式： 定义了 input[type="text"] 元素的默认背景色和文本颜色，以及 placeholder 的默认颜色。这里使用了 CSS 变量 --c 来控制 placeholder 的颜色，方便 JavaScript 修改。
JavaScript 代码：
- bgColors、textColors 和 phColors 数组分别存储背景色、文本颜色和 placeholder 颜色的值。
- idx 变量用于记录当前颜色的索引。
- setColor() 函数：
  - 首先更新 idx 变量，实现颜色的循环切换。
  - 使用 document.querySelectorAll('input[type=text]') 选取所有 input[type="text"] 元素。
  - 使用 forEach() 方法遍历选取的元素，对每个元素执行以下操作：
    - el.style.backgroundColor = bgColors[idx]：设置背景色。
    - el.style.color = textColors[idx]：设置文本颜色。
    - el.style.setProperty("--c", phColors[idx])：设置 placeholder 颜色。