jQuery改变字体系列和字体大小答案

【问题标题】：jQuery changing font family and font sizejQuery改变字体系列和字体大小
【发布时间】：2011-12-01 01:36:59
【问题描述】：

我正在尝试通过从列表中选择字体来更改出现在 textarea 和容器中的文本的字体系列和字体大小，字体大小应该是固定的。我还尝试在选择字体时更改背景颜色。

这是我的代码：

    <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>

当我在浏览器中尝试时，字体系列在文本区域中没有改变。它只在容器中发生变化。我现在也知道如何在选择字体系列时为容器和文本区域设置新的字体大小和背景。

我将不胜感激任何帮助！

【问题讨论】：

标签： jquery fonts

【解决方案1】：

完整的工作解决方案：

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");
});

在这里提琴：http://jsfiddle.net/AaT9b/

【讨论】：

纯粹的卓越。

【解决方案2】：

在我看来，只需在 body 上设置一个类并根据该类在 css 中设置字体系列，这将是一个更清洁、更简单的解决方案。
不知道这是否适合您的情况。

【讨论】：

【解决方案3】：

在某些浏览器中，为 textareas 和 input 设置了明确的字体，因此它们不会从更高的元素继承字体。所以，我认为你需要为每个文本区域应用字体样式，并在文档中输入（不仅仅是正文）。

一个想法可能是在正文中添加类，然后使用 CSS 相应地设置文档样式。

【讨论】：

【解决方案4】：

如果你只想改变TEXTAREA中的字体那么你只需要将原代码中的changeFont()函数改为：

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

然后选择一种字体只会在TEXTAREA中改变字体。

【讨论】：