jquery - 将字体大小设置为输入字段中的值。 (来自 jquery .val() 的值)

Question

我正在尝试为从 $("#company").val() 和 $("#firstname").val() 在 #page2 中。已尝试使用 css() 和样式表，但我似乎无法正确处理。

$(document).ready(function() {
  $("#printid").hide();

  $("#print").click(function() {
    $(".form").hide();
    $("#printid").show();
    $("#page2").html($("#company").val() + "<br />" + $("#firstname").val())
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
  <form>
    <p>
      <label for="company">Comp: </label>
      <input id="company" type="text">
    </p>
    <p>
      <label for="name">Name: </label>
      <input id="name" type="text">
    </p>
  </form>
  <input type="button" id="print" value="Skriv Ut" />
</div>

<div id="printid">
  <p id="page2"></p>
</div>

Answer 1

最简单的方法是用不同的类将每个值包装在它自己的 span 中，然后使用 CSS 来设置它们的样式，如下所示:

$(document).ready(function() {
  $("#printid").hide();

  $("#print").click(function() {
    $(".form").hide();
    $("#printid").show();
    $("#page2").html('<span class="company">' + $("#company").val() + '</span><br /><span class="name">' + $("#name").val() + '</span>');
  });
});

.company { font-size: 1.5em; }
.name { font-size: 0.8em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
  <form>
    <p>
      <label for="company">Comp: </label>
      <input id="company" type="text">
    </p>
    <p>
      <label for="name">Name: </label>
      <input id="name" type="text">
    </p>
  </form>
  <input type="button" id="print" value="Skriv Ut" />
</div>

<div id="printid">
  <p id="page2"></p>
</div>

另请注意，输入的 ID 为 name，但您使用的是 firstname，但我认为这只是问题中的错字。