微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery更改字体系列和字体大小

我试图通过从列表中选择字体来更改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>

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

我将不胜感激任何帮助!

解决方法

全面解决方案:

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/

原文地址:https://www.jb51.cc/jquery/181591.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐