根据选择的选择选项更改实际的 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 中的文本。

如何将颜色（来自颜色）选择器和字体的值添加到 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());
  });
});

Answer 2

字体是这样的：

$("#selectafont").change(function(){
   var font = $(this).val();
   if (font !== "null")
      $(".add_my_text").css("font-family", font);
});

颜色选择也类似（抱歉，我不熟悉 jscolor.com 颜色选择器）。