Функция jquery для уменьшения размера шрифта при каждом нажатии кнопки

Пожалуйста помоги.

function fontDown() {
  var curSize = parseInt($('.box').css('font-size'));
  curSize--;
  $('.box').css('font-size', curSize + "pt").css('line-height', curSize + "pt");
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick = "fontDown()">button</button>
    
<div class = "box" style = "font-size: 14pt; line-height: 14pt;">sometext</div>

Я ожидаю, что размер шрифта будет уменьшаться каждый раз, когда я нажимаю кнопку. Но она только увеличивается. Мало того, размер шрифта увеличивается примерно на 5 или 7 пунктов при каждом нажатии кнопки.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
0
67
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

использовать это: это легко

операторы +=, *=, -=, /= должны использоваться в jquery

function fontDown() {
  $('.box')
    .css('font-size', '-=1pt')
    .css('line-height', '-=1pt');
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick = "fontDown()">button</button>
    
<div class = "box" style = "font-size: 14pt; line-height: 14pt;">sometext</div>

Мне нравится простота этого ответа, однако значение pt вызвало проблему, и эта функция вообще не работала.

Joshua Robison 09.02.2023 05:01

.css('font-size') возвращает строку типа 18.6667px, которая является значением px, а не pt.

Изменение кода для использования вместо этого px уменьшит размер по желанию.

function fontDown() {
  var curSize = parseInt($('.box').css('font-size'));
  curSize--;
  $('.box').css('font-size', curSize + "px").css('line-height', curSize + "px");
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick = "fontDown()">button</button>

<div class = "box" style = "font-size: 14pt; line-height: 14pt;">sometext</div>

Это тоже был ответ, но я хотел сохранить размер шрифта pt, потому что я делаю документ для печати. Тем не менее, спасибо за вашу помощь.

Joshua Robison 09.02.2023 04:59
Ответ принят как подходящий

Вам нужно выполнить преобразование единиц измерения px в pt.

Отношение px к pt равно 4/3, поэтому вы получите большее значение в px, даже если уменьшите его на единицу. Затем вы присваиваете этому наибольшему значению единицу измерения pt, которая каждый раз создает наибольший размер шрифта.

function fontDown()
  {
  let curSize = Math.round( (parseFloat($('.box').css('font-size')) *3) / 4); 
                // px to pt converssion
  curSize--;
  $('.box').css('font-size', curSize + "pt").css('line-height', curSize + "pt");
  }
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick = "fontDown()">button</button>

<div class = "box" style = "font-size: 14pt; line-height: 14pt;">sometext</div>

Другие вопросы по теме