jQuery改变字体家族和字体大小 [英] jQuery changing font family and font size
问题描述
我试图通过从列表中选择字体来更改出现在textarea和容器中的文本的字体大小和字体大小，字体大小应该是固定的。我也试图改变选择字体时的背景颜色。
这就是我的代码：
< script type =文本/ JavaScript的>
function changeFont（_name）{
document.body.style.fontFamily = _name;
document.textarea = _name;
}
< / script>
< / head>
< body style =font-family>
< form id =myform>
< input type =text/>
<按钮>清除< /按钮>
< select id =fsonchange =changeFont（this.value）;>
< option value =arial> Arial< / option>
< option value =verdana> Verdana< / option>
< option value =影响>影响< / option>
< option value ='ms comic sans'> MS Comic Sans< / option>
< / select>
< div align =left>
< textarea style =resize：none; id =mytextarea
cols =25rows =3readonly =readonlywrap =on>
Textarea
< / textarea>
< div id ='container'>
< div id ='float'>
< p>这是一个容器< / p>
< / div>
< / form>
< / body>
当我在浏览器中试用时，字体系列在文本区域中不会改变。它只在容器中发生变化。我现在也知道如何设置一个新的字体大小和背景的容器和textarea的字体家庭被挑选出来。
我会很感激任何帮助的人！ 完整的解决方案
：
HTML：
< ; form id =myform>
<按钮>清除< /按钮>
< select id =fs>
< option value =Arial> Arial< / option>
< option value =Verdana> Verdana< / option>
< option value =影响>影响< / 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>文本到textarea< / textarea>
< div id =containerclass =changeMe>
< div id =float>
< p>
文本到容器
< / p>
< / div>
< / div>
jQuery：
（$（this）.val（））;
$（$（$＃$））$（$＃$） '.changeMe'）。css（font-family，$（this）.val（））;
}）;
$ b $（＃size）。change（function（）{
$（'。changeMe'）。css（font-size，$（this）.val（） +px）;
}）;
小提琴： http://jsfiddle.net/AaT9b/
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!
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/
这篇关于jQuery改变字体家族和字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
