本文旨在解决如何使用 JavaScript 函数一次性修改页面上所有 textarea 或 input[type=”text”] 元素的样式。通过 querySelectorAll() 方法选取所有目标元素，并使用 forEach() 循环遍历，可以高效地批量修改样式，包括背景色、文本颜色和 placeholder 颜色。本文提供详细的代码示例和解释，帮助开发者轻松实现这一功能。
在 Web 开发中，经常需要批量修改页面上相同类型元素的样式。例如，需要一次性更改所有 textarea 或者 input[type=”text”] 元素的背景色、文本颜色和 placeholder 颜色。本文将介绍如何使用 JavaScript 函数来实现这一目标，并提供详细的代码示例。
核心方法：querySelectorAll() 和 forEach()
要批量修改元素样式，首先需要选取所有目标元素。document.querySelectorAll() 方法可以根据 CSS 选择器选取所有匹配的元素，返回一个 NodeList 集合。然后，可以使用 forEach() 方法遍历 NodeList 集合，对每个元素进行样式修改。
立即学习“Java免费学习笔记（深入）”；
代码示例
以下是一个完整的示例，演示如何使用 JavaScript 函数批量修改 input[type=”text”] 元素的背景色、文本颜色和 placeholder 颜色：
::placeholder { color: var(--c, #808080);}input[type="text"] { background-color: #FFFFFF; color: #000000;}var bgColors = ["#FFFFFF", "#80C040", "#00FFFF", "#000000", "#000000"];var textColors = ["#000000", "#000000", "#000000", "#FF0000", "#FFFF00"];var phColors = ["#808080", "#406020", "#008080", "#800000", "#808000"];var idx = 0; //indexfunction 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]); });}
代码解释
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 颜色。
注意事项
确保 CSS 选择器能够准确选取到目标元素。如果需要修改其他样式属性，只需在 forEach() 循环中添加相应的代码即可。如果需要处理动态添加的元素，可以使用 MutationObserver 监听 DOM 变化，并在元素添加后执行样式修改。
总结
通过 querySelectorAll() 和 forEach() 方法，可以轻松实现批量修改元素样式的需求。这种方法简洁高效，适用于各种 Web 开发场景。掌握这种技巧，可以提高开发效率，并使代码更加简洁易维护。
以上就是使用 JavaScript 函数批量修改 Textarea 样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514926.html
微信扫一扫 
支付宝扫一扫 
