如何更改字体大小?

凯尔蒂帕蒂尔

我正在 jquery 中创建一个 textarea 字段。当我在该文本区域输入任何内容时,如果我更改字体系列、字体颜色和字体大小,它应该会更改。

在我下面的代码中,当我在文本区域中写入任何内容并更改字体系列和字体颜色时,它会发生变化,但是当我尝试更改字体大小时,它并没有发生变化。我有字体大小作为文本区域意味着无论我给它什么大小都应该改变,但这个问题我无法解决。

请任何人都可以帮我解决这个问题。

$("#ff").change(function() {
  $('.changeMe').css("font-family", $(this).val());
});

$("#size").change(function() {
  $('.changeMe').css("font-size", $(this).val() + "px");
});

$("#color").change(function() {
  $('.changeMe').css("color", $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:120px; padding-left:120px">

  <textarea rows="8" cols="50" class="changeMe" placeholder="Enter something"></textarea>

  <br><br>

  <form id="myform">

    <label>Select Font Family</label>
    <select id="ff">
      <option value="Arial">Arial</option>
      <option value="Verdana">Verdana </option>
      <option value="Times ">Times New Roman</option>
      <option value="Impact">Impact</option>
    </select><br><br>

    <label>Select Font size</label>
    <input type="text" id="size"><br><br>

    <label>Select color</label>
    <select id="color">
      <option value="orange" style="background-color: orange;">orange</option>
      <option value="red" style="background-color: red;">red</option>
      <option value="pink" style="background-color: pink;">pink</option>
      <option value="blue" style="background-color: blue;">blue</option>
    </select><br><br>

  </form>

</div>

普密帕特尔

您应该使用以下代码来实现您想要的。此 keyup 函数将在每个按键事件上更改字体大小。

$("#size").on("keyup", function() {
$('.changeMe').css("font-size", $(this).val() + "px");
});

我希望这可以帮助你。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章