изменить цвет текста при изменении выделения в выпадающем списке - PullRequest
1 голос
/ 28 ноября 2009

У меня есть раскрывающийся список цветов, и при выборе я хочу изменить значение цвета шрифта 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 ]

3 голосов
/ 28 ноября 2009

Это будет работать для цветов, кроме светлого / темно-синего / зеленого: чтобы они работали, удалите пробелы в атрибутах 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 голос
/ 28 ноября 2009

Это действительно легко, используя jQuery (или большинство библиотек)

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

Я думаю, что код довольно понятен

EDIT
Просто заметил, что некоторые из ваших значений не являются реальными цветами, вы можете использовать переключатель для этих случаев, или решить присвоить им значение с именем цвета CSS: http://www.w3schools.com/css/css_colornames.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...