jQuery changing font family and font size

Question

I am trying to change font family and font size of the text that appears in a textarea and a container by choosing the font from the list, font size should be fixed. I am also trying to change color of the background when a font is picked.

That is my code:

    <script type="text/javascript">     
    function changeFont(_name) {
        document.body.style.fontFamily = _name;
        document.textarea = _name;
    } 
    </script>

</head>
<body style="font-family">   
    <form id="myform">
        <input type="text" /> 
        <button>erase</button> 
        <select id="fs" onchange="changeFont(this.value);">
            <option value="arial">Arial</option>
            <option value="verdana">Verdana</option>
            <option value="impact">Impact</option>
            <option value="'ms comic sans'">MS Comic Sans</option>
        </select>
        <div align="left">
            <textarea style="resize: none;" id="mytextarea" 
                 cols="25" rows="3" readonly="readonly" wrap="on">
                Textarea
            </textarea>
            <div id='container'>
                <div id='float'>
                    <p>This is a container</p>
                </div>
    </form>
</body>

When I try it in the browser the font family does not change in the text area. It only changes in the container. I also do now know how to set a new font size and background for the container and the textarea when the font family is picked.

I will appreciate any help guys!

This question is related to jquery fonts

User · Answer

If you only want to change the font in the TEXTAREA then you only need to change the changeFont() function in the original code to:

function changeFont(_name) {
    document.getElementById("mytextarea").style.fontFamily = _name;
}

Then selecting a font will change on the font only in the TEXTAREA.

User · Answer

Full working solution    HTML    lt form id  myform  gt       lt button gt erase lt  button gt       lt select id  fs  gt            lt option value  Arial  gt Arial lt  option gt           lt option value  Verdana   gt Verdana  lt  option gt           lt option value  Impact   gt Impact  lt  option gt           lt option value  Comic Sans MS  gt Comic Sans MS lt  option gt       lt  select gt        lt select id  size  gt           lt option value  7  gt 7 lt  option gt           lt option value  10  gt 10 lt  option gt           lt option value  20  gt 20 lt  option gt           lt option value  30  gt 30 lt  option gt       lt  select gt   lt  form gt    lt br  gt    lt textarea class  changeMe  gt Text into textarea lt  textarea gt   lt div id  container  class  changeMe  gt       lt div id  float  gt           lt p gt              Text into container          lt  p gt       lt  div gt   lt  div gt    jQuery       fs   change function           alert   this  val             changeMe   css  font-family     this  val               size   change function             changeMe   css  font-size     this  val      px          Fiddle here  http   jsfiddle net AaT9b

User · Answer

In my opinion  it would be a cleaner and easier solution to just set a class on the body and set the font-family in css according to that class  don t know if that s an option in your case though

User · Answer

In some browsers  fonts are set explicit for textareas and inputs  so they don   t inherit the fonts from higher elements  So  I think you need to apply the font styles for each textarea and input in the document as well  not just the body    One idea might be to add clases to the body  then use CSS to style the document accordingly

[jquery] jQuery changing font family and font size

The answer is

Examples related to jquery

Examples related to fonts

Tags