jquery - 如何使用 jquery 中的按钮更改字体大小，该按钮位于 "vw"而不是 "px"

Question

当字体为“px”并且文本适当增加和减少时，这工作正常，但如果需要“vw”字体怎么办？

$(".up").on("click", function() {

  var classname = $(this).parent().attr('id');
  var size = parseInt($(".txts").find('.' + classname).css('font-size'));
  console.clear()
  console.log("old size: "+size);
  if ((size + 2) <= 50) {
    size = size + 2;
    $(".txts").find('.' + classname).css('font-size', size);
  }
  console.log("new size: "+size);

});

$(".down").on("click", function() {
  if ((size - 2) >= 12) {
    $(this).siblings("h1").css("font-size", "-=2");
  }
});

body {
  margin: 20px;
}

.container {
  width: 500px;
  text-align: center;
}

h1 {
  height: 60px;
  padding: 0;
  margin: 0;
}

p {
  display: inline-block;
}

.font-size-label {
  margin-right: 20px;
}

#font-size {
  margin: 0 5px;
}

button {
  width: 30px;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="txts">
  <h2 class="part1">Resize Me1</h2>
  <h2 class="part2">Resize Me2</h2>
</div>
<div class="container" id="part1">

  <p class="font-size-label">1</p>
  <button class="up">+</button>

  <button class="down">-</button>
</div>
<br><br>
<div class="container" id="part2">

  <p class="font-size-label">2</p>
  <button class="up">+</button>

  <button class="down">-</button>
</div>

你能帮我吗？

Answer 1

您将 font-size 值设置为没有单位的数字:

size = size + 2;
$(".txts").find('.' + classname).css('font-size', size);

默认情况下，浏览器将其解释为 px。但您可以指定任何您喜欢的单位:

size = size + 2;
$(".txts").find('.' + classname).css('font-size', size + 'vw');

或者:

size = size + 2;
$(".txts").find('.' + classname).css('font-size', `${size}vw`);