将font-size设置为输入字段的值。 （来自jquery .val（）的值）

Question

我尝试将font-size与$("#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()) }); });和样式表，但我似乎无法做到正确。

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

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，但我认为这只是问题中的拼写错误。

Answer 2

为什么不用css为他们添加课程？

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

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

#page2{
  font-size:22px;
  font-weight: bold;
}

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