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

时间:2009-11-28 10:27:27

标签: javascript css

我有一个颜色下拉列表,选中后,我想将css字体颜色的值更改为选择的值。

我该怎么做?

<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;
}

2 个答案:

答案 0 :(得分:3)

这适用于浅色/深蓝色/绿色以外的颜色:要使它们有效,请删除相应value标签的option属性中的空格(并修复暗色调中的拼写错误)

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

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

答案 1 :(得分:1)

使用jQuery(或大部分库)

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

我认为代码非常自我解释

修改
只是注意到你的一些值不是真正的颜色,你可以使用开关来处理这些情况,或者决定给它们一个带有css颜色名称的值:http://www.w3schools.com/css/css_colornames.asp