При нажатии на кнопки (большую и нижнюю) текст должен измениться на 1 пиксель соответственно, но этого не происходит. Чт ⇐ CSS

[Anonymous]

Я пытаюсь написать программу, которая будет изменять размер шрифта на 1 пиксель при нажатии. «Большая» кнопка увеличивается на 1 пиксель, а «низкая» кнопка соответственно уменьшается.
HTML:

Код: Выделить всё

Large
Low
Нажми меня

Css:

Код: Выделить всё

.text{
font-size: 36px;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
color: red;
user-select: none;
}

Js:

Код: Выделить всё

const text = document.querySelector('.text');
const large = document.querySelector('.large');
const low = document.querySelector('.low');

large.addEventListener('click', () => {
text.style.fontSize = `calc(${text.style.fontSize} + 1px)`;
});
low.addEventListener('click', () => {
text.style.fontSize = `calc(${text.style.fontSize} - 1px)`;
});

Я пытался сделать эту программу с использованием функции Calc, но по каким-то причинам это не сработало. Еще я попробовал поставить в расчетных значениях «100%» и все заработало, но немного не так, как хотелось

Подробнее здесь: https://stackoverflow.com/questions/787 ... by-1px-acc