jQuery 更改字体系列和字体大小 [英] jQuery changing font family and font size

查看：26 发布时间：2021/12/30 10:59:11 jquery fonts

本文介绍了jQuery 更改字体系列和字体大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是我的代码:

 <body style="font-family"><form id="myform"><input type="text"/><按钮>擦除</按钮><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></选择><div align="left"><textarea style="resize: none;"id="mytextarea"cols="25" rows="3" readonly="readonly" wrap="on">文本区</textarea><div id='容器'><div id='浮动'><p>这是一个容器</p>

</表单>

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

我将不胜感激任何帮助！

解决方案

完整的解决方案:

HTML:

<按钮>擦除</按钮><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 id="size"><option value="7">7</option><option value="10">10</option><option value="20">20</option><option value="30">30</option></选择></表单><br/><textarea class="changeMe">文本到textarea</textarea><div id="container" class="changeMe"><div id="浮动"><p>文本到容器</p>

jQuery:

$("#fs").change(function() {//警报($(this).val());$('.changeMe').css("font-family", $(this).val());});$("#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屋！

jQuery 更改字体系列和字体大小 [英] jQuery changing font family and font size

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

jQuery 更改字体系列和字体大小 [英] jQuery changing font family and font size

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭