改变文本框中的字体颜色

2025-11-03 16:10:03 网络作者：本站点击：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>用下拉菜单改变字体颜色</title>
</head>

<body background="bg.gif">
<form name="form1">
  <input name="textfield" type="text" size="18" value="零基础学JavaScript">
  <select name="menu1" onChange="Fcolor()">
    <option value="black">黑色</option>
    <option value="yellow">黄色</option>
    <option value="blue">蓝色</option>
    <option value="green">绿色</option>
    <option value="red">红色</option>
    <option value="purple">紫色</option>
  </select>
</form>
<script type="text/javascript">
function Fcolor(){
  var e=window.event;//获取事件对象
  var obj=e.srcElement;//获取发生事件的元素
  form1.textfield.style.color=obj.value;//设置文本框中的字体颜色
}
</script>
</body>
</html>

为什么上面改变的是“零基础学JavaScript”的文本颜色，

而不是后面框里的"黑色"、“黄色”等字体的颜色？

这是因为代码中JavaScript函数的逻辑明确指定了要改变文本框中的字体颜色，而不是下拉菜单选项本身的颜色。

具体来说，在Fcolor()函数中：

form1.textfield 获取了名为"textfield"的文本框元素
obj.value 获取了当前选中选项的value属性值（如"black"、"yellow"等）
form1.textfield.style.color = obj.value 这行代码将文本框的字体颜色设置为选中选项对应的颜色值

当用户在下拉菜单中选择不同选项时，onChange事件会触发Fcolor()函数执行。

函数通过e.srcElement获取触发事件的元素（即<select>下拉菜单），然后读取其value属性来获取颜色值，

最终将这个颜色值应用到文本框的字体样式上。

下拉菜单选项"黑色"、"黄色"等文字的颜色是由浏览器默认样式决定的，而代码逻辑专门针对文本框内容设置了颜色样式。

标签：