Menu
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!
752
To change the font size of an element, we will use css() method. The css() method is used to change the style property of the selected element. Return value: It will return the value of the property for the selected element.
To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.
In HTML, you can change the size of text with the <font> tag using the size attribute. The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size.
Full working solution :
HTML:
<form id="myform"> <button>erase</button> <select id="fs"> <option value="Arial">Arial</option> <option value="Verdana ">Verdana </option> <option value="Impact ">Impact </option> <option value="Comic Sans MS">Comic Sans MS</option> </select> <select id="size"> <option value="7">7</option> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> </select> </form> <br/> <textarea class="changeMe">Text into textarea</textarea> <div id="container" class="changeMe"> <div id="float"> <p> Text into container </p> </div> </div> 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/
64
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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
