Question

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

他们可以选择字体
他们可以选择字体的颜色
他们可以输入自己的文字。

选择选项是：

<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...">

控制它并控制它的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更新，并在input元素中键入内容。其中的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颜色选择器）。

根据所选的选项更改实际的css字体

2 个答案: