jquery - 根据选择的选项更改实际的 CSS 字体

Question

我正在编写一个页面脚本，用户可以在其中向图像添加文本。好的，其中三个要素是:

1. 他们可以选择字体
2. 他们可以选择字体的颜色
3. 他们可以输入自己的文本。

选择的选项是:

<select id="selectafont" name="selectafont" style="width: 200px;" class="required">
 <option value="null">-- Select a Font ... --</option>
 <option value="folksbold">Folks Bold</option>
 <option value="arial">Arial</option>
 <option value="tahoma">Tahoma</option>
 <option value="verdana">Verdana</option>
 <option value="comicsans">Comic Sans</option>
 <option value="ubuntu">Ubuntu</option>

颜色(我们使用 jscolor.com )颜色选择器。它的元素是:

<input id="pick_a_color" class="color" value="f12b63">

输入元素和js我正在工作，但它是一个常规输入元素。当您键入时，会更新另一个 div 中的文本。

如何将颜色(来自 color )选择器的值和字体添加到 DIV 的 css 中。

假设我的输入元素是:

<input name="add_my_text" class="add_my_text" id="add_my_text" type="text" placeholder="Enter your Text...">

控制它并将其附加到 div 的 JS 是:

$(document).ready(function () {
 //ad title
 $("#add_my_text").keyup(function() 
  {
  var add_my_text=$(this).val();
  $(".add_my_text").html(add_my_text);
  return false;
  });
 });

以便页面上的 div 使用输入元素中键入的内容进行更新。其CSS为:

.add_my_text {
position:absolute;
left:150px;
top:40px;
font-size:18px;
 }

我想做的是在上面的div类中(动态改变字体颜色和字体系列。

Answer 1

还没有测试下面的代码，但如果我明白你在寻找什么，这应该可行:

$(document).ready(function () {
  //ad title
  $("#add_my_text").keyup(function() 
  {
    var add_my_text = $(this).val();
    $(".add_my_text").html(add_my_text);
    return false;
  });
  $('#selectafont').change(function()
  {
    var selected = $(this).val();
    if (selected != "null")
    {
      $('.add_my_text').css('font-family', selected);
    }
  });
  $('#pick_a_color').change(function()
  {
      $('.add_my_text').css('color', '#'+$(this).val());
  });
});