根據所選的選項更改實際的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"> 

input元素和JS我有工作，但其常規輸入元素。當你鍵入更新另一個div內的文本。

如何添加顏色（從彩色）的值選擇器和字體的DIV的CSS。

因此，可以說我的輸入元素是：

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

而且JS來控制這一點，它apend到一個div是：

$(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

像這樣的字體：

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

和類似的顏色選擇（對不起，我不熟悉jscolor.com顏色選擇器）。

Answer 2

沒有測試下面的代碼，但如果我理解你在找什麼，這應該工作：

$(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()); 
    }); 
});