Пожалуйста помоги.
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 пунктов при каждом нажатии кнопки.
использовать это: это легко
операторы +=
, *=
, -=
, /=
должны использоваться в 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>
.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, потому что я делаю документ для печати. Тем не менее, спасибо за вашу помощь.
Вам нужно выполнить преобразование единиц измерения 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>
Мне нравится простота этого ответа, однако значение pt вызвало проблему, и эта функция вообще не работала.