如何更改字体大小？

Question

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

Answer 1

您应该使用下面的代码来实现所需的功能。此按键功能将在每次按键事件时更改字体大小。

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

我希望这可以帮助你。