技术文摘

JavaScript 按不同按钮使文本框字显示不同颜色

2025-01-10 20:03:58 小编

JavaScript 按不同按钮使文本框字显示不同颜色

在网页开发中，为用户提供丰富的交互体验至关重要。其中，通过 JavaScript 实现按不同按钮让文本框中的文字显示不同颜色，是一个常见且有趣的功能。它不仅能增加页面的趣味性，还能让用户更直观地与页面进行互动。

要实现这一功能，首先要搭建基本的 HTML 结构。创建一个包含文本框和多个按钮的页面。文本框用于输入或显示内容，而按钮则是触发颜色变化的关键元素。例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>按钮控制文本框颜色</title>
</head>
<body>
    <input type="text" id="textBox" value="请输入内容">
    <button id="redButton">红色</button>
    <button id="blueButton">蓝色</button>
    <button id="greenButton">绿色</button>
</body>
</html>

接下来就是核心的 JavaScript 部分。通过获取 HTML 元素的引用，我们可以为按钮添加点击事件监听器。当按钮被点击时，相应的函数会被调用，从而改变文本框中文字的颜色。

// 获取文本框和按钮的引用
const textBox = document.getElementById('textBox');
const redButton = document.getElementById('redButton');
const blueButton = document.getElementById('blueButton');
const greenButton = document.getElementById('greenButton');

// 为红色按钮添加点击事件监听器
redButton.addEventListener('click', function() {
    textBox.style.color ='red';
});

// 为蓝色按钮添加点击事件监听器
blueButton.addEventListener('click', function() {
    textBox.style.color = 'blue';
});

// 为绿色按钮添加点击事件监听器
greenButton.addEventListener('click', function() {
    textBox.style.color = 'green';
});

在上述代码中，addEventListener 方法用于监听按钮的点击事件。当某个按钮被点击时，对应的回调函数会将文本框的 style.color 属性设置为相应的颜色。

通过这样的简单代码，就能轻松实现按不同按钮使文本框文字显示不同颜色的功能。在实际应用中，还可以进一步扩展和优化。比如添加更多颜色的按钮，或者通过函数封装来简化代码结构，提高代码的可维护性。结合 CSS 的样式类，能实现更复杂的视觉效果。掌握这一基础功能，能为网页开发带来更多创意和可能性，为用户打造出更加丰富多彩的交互界面。

TAGS: 前端开发技术 JavaScript按钮操作 JavaScript交互效果文本框颜色设置

万千站长工具

技术文摘

JavaScript 按不同按钮使文本框字显示不同颜色

JavaScript 按不同按钮使文本框字显示不同颜色

欢迎使用万千站长工具！