как изменить размер шрифта с помощью кнопки в jquery, чтобы она была в «vw» вместо «px» - PullRequest
Новая
       6

как изменить размер шрифта с помощью кнопки в jquery, чтобы она была в «vw» вместо «px»

0 голосов
/ 04 февраля 2020

Это прекрасно работает, когда шрифты в «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>

Не могли бы вы мне помочь?

1 Ответ

2 голосов
/ 04 февраля 2020

Вы устанавливаете значение 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`);
...