当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript批量修改文本框样式技巧

JavaScript批量修改文本框样式技巧

2025-08-14 17:18:31 0浏览收藏

还在为批量修改 Textarea 样式而烦恼吗？本文针对 Web 开发者，提供了一种高效的 JavaScript 解决方案，告别重复代码，提升开发效率。文章详细讲解如何利用 `querySelectorAll()` 方法和循环遍历，轻松批量修改页面中所有 Textarea 元素的样式，包括背景颜色、文本颜色以及占位符颜色。通过示例代码，深入剖析核心方法，并提供实用注意事项，助你快速掌握 JavaScript 批量修改 Textarea 样式的技巧，让你的 Web 应用更加生动灵活。掌握此技巧，优化你的前端代码，提升用户体验！

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

本文旨在指导开发者如何使用 JavaScript 函数高效地批量修改页面中所有 Textarea 元素的样式，包括背景颜色、文本颜色以及占位符颜色。通过 querySelectorAll() 方法和循环遍历，可以轻松地对多个 Textarea 元素应用相同的样式更改，避免了重复编写代码的繁琐，提升了开发效率。

在 Web 开发中，经常需要动态地修改页面元素的样式，例如根据用户的交互或应用的状态改变 Textarea 的颜色。如果页面上存在多个 Textarea 元素，手动逐个修改将非常低效。本文将介绍如何使用 JavaScript 函数批量修改 Textarea 的样式，包括背景颜色、文本颜色和占位符颜色。

核心方法：querySelectorAll() 和循环遍历

querySelectorAll() 方法允许我们使用 CSS 选择器选取页面中所有匹配的元素。然后，我们可以使用循环遍历这些元素，并对每个元素应用相同的样式更改。

示例代码

以下代码演示了如何使用 JavaScript 函数批量修改 input[type="text"] 元素的背景颜色、文本颜色和占位符颜色。

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

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

&lt;input type=&quot;text&quot; placeholder=&quot;Type Here&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Type Here&quot;&gt;
<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>

代码解析

定义颜色数组： 定义了 bgColors、textColors 和 phColors 三个数组，分别存储背景颜色、文本颜色和占位符颜色。
setColor() 函数：
- 使用 document.querySelectorAll('input[type=text]') 选取页面中所有 input[type="text"] 元素。
- 使用 forEach() 方法遍历所有选取的元素。
- 在循环中，分别设置每个元素的 backgroundColor、color 和 --c 属性，其中 --c 用于控制占位符的颜色。
CSS 样式： 使用 CSS 伪元素 ::placeholder 定义占位符的颜色，并使用 CSS 变量 --c 来动态控制颜色值。
HTML 结构： 创建了两个 input[type="text"] 元素和一个按钮，点击按钮时调用 setColor() 函数。

注意事项