Changing actual css font based on select option chosen
<p>I am scripting a page, where a user can add text to a image. Ok and three of the elements are that:</p>

<ol>
<li>they can choose a font</li>
<li>they can select the color of the font</li>
<li>they can type in their own text.</li>
</ol>

<p>The select option is:</p>

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

<p></p>

<p>The color ( we use jscolor.com ) color picker.
Its element is:</p>

<pre><code>&lt;input id="pick_a_color" class="color" value="f12b63"&gt;
</code></pre>

<p>The input element and js I have working, but its a regular input element. That as you type updates the text within another div.</p>

<p>How do I add the value of the color ( from color ) picker and the font to the css of the DIV.</p>

<p>So lets say my input element is :</p>

<pre><code>&lt;input name="add_my_text" class="add_my_text" id="add_my_text" type="text" placeholder="Enter your Text..."&gt;
</code></pre>

<p>And the JS to control this and apend it to a div is:</p>

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

<p>So that a div on page  updates with the content typed in the input element.
The css of which is:</p>

<pre><code>.add_my_text {
position:absolute;
left:150px;
top:40px;
font-size:18px;
 }
</code></pre>

<p>What I want to do is in the above div class ( dynamically change the font color and the font-family.</p>
