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        lt script type  text javascript  gt           function changeFont  name            document body style fontFamily    name          document textarea    name              lt  script gt    lt  head gt   lt body style  font-family  gt          lt form id  myform  gt           lt input type  text    gt            lt button gt erase lt  button gt            lt select id  fs  onchange  changeFont this value    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   ms comic sans   gt MS Comic Sans lt  option gt           lt  select gt           lt div align  left  gt               lt textarea style  resize  none   id  mytextarea                    cols  25  rows  3  readonly  readonly  wrap  on  gt                  Textarea              lt  textarea gt               lt div id  container  gt                   lt div id  float  gt                       lt p gt This is a container lt  p gt                   lt  div gt       lt  form gt   lt  body gt    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

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

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

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

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

[jquery] jQuery changing font family and font size

Examples related to jquery

Examples related to fonts