jQuery 更改字体系列和字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7654708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery changing font family and font size
提问by Tomala
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.
我试图通过从列表中选择字体来更改出现在 textarea 和容器中的文本的字体系列和字体大小，字体大小应该是固定的。我还尝试在选择字体时更改背景的颜色。
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.
当我在浏览器中尝试时，文本区域中的字体系列不会改变。它只在容器中发生变化。我现在也知道如何在选择字体系列时为容器和 textarea 设置新的字体大小和背景。
I will appreciate any help guys!
我将不胜感激任何帮助家伙！
回答by Benjamin Crouzier
Full working solution :
完整的工作解决方案：
HTML:
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:
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/
在这里小提琴：http: //jsfiddle.net/AaT9b/
回答by Andy
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.
在我看来，只在 body 上设置一个类并根据该类在 css 中设置 font-family 将是一个更清晰、更简单的解决方案。
不过，不知道这是否是您的选择。
回答by David Hellsing
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.
一种想法可能是向正文添加类，然后使用 CSS 相应地设置文档样式。
回答by tom
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:
如果只想更改 TEXTAREA 中的字体，那么只需将原代码中的 changeFont() 函数更改为：
function changeFont(_name) {
document.getElementById("mytextarea").style.fontFamily = _name;
}
Then selecting a font will change on the font only in the TEXTAREA.
然后选择一种字体只会在 TEXTAREA 中更改字体。
