在下拉列表中更改选择时更改文本颜色答案

【问题标题】：change text color on change of selection in dropdown list在下拉列表中更改选择时更改文本颜色
【发布时间】：2009-11-28 10:27:26
【问题描述】：

I have a drop-down list of colors, and when selected, i want to change a value of css font color to the value of the selection.

我该怎么做？

<select name="color">
          <option value="white" selected="selected">white</option>
          <option value="black">black</option>
          <option value="red">red</option>
          <option value="light blue">light blue</option>
          <option value="dark blue">dark blue</option>
          <option value="light green">light green</option>
          <option value="dark dreen">dark green</option>
          <option value="yellow">yellow</option>
          <option value="orange">orange</option>
          <option value="pink">pink</option>
          <option value="purple">purple</option>
          <option value="gray">gray</option>
        </select>

我要更改的 css（文本字段中的文本）

#create form .text {
    height: 50px;
    width: 500px;
    font-size: 36px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:#fff;
}

【问题讨论】：

这是一个非常经典的 JavaScript 示例。使用 Google 应该很容易找到。

标签： javascript css

【解决方案1】：

这将适用于除浅色/深蓝色/绿色之外的颜色：要使它们起作用，请删除相应 option 标签的 value 属性中的空格（并修复深色中的错字）

<script language="javascript">
  function setColor()
  {
    var color = document.getElementById("color").value;
    document.getElementById("txtID").style.color = color;
  }
</script>

<select id="color" onclick="setColor();">...</select>

【讨论】：

【解决方案2】：

使用 jQuery（或大多数库的）真的很容易

$('#color').change(function(){
   $('#create form .text').css('color', $(this).val());
});

我认为代码很自我解释

编辑
刚刚注意到您的一些值不是真正的颜色，您可以在这些情况下使用开关，或者决定给它们一个带有 css 颜色名称的值：http://www.w3schools.com/css/css_colornames.asp

【讨论】：

如果去掉空格，它们都是 CSS3/SVG/X11 颜色。技术上对 CSS2 无效，X11 颜色通常很烂，但每个浏览器都支持它们。