点击Large/Low按钮无法实现字体±1px调整，求解决方法

你的代码失效的核心原因：

• 初始状态下，.text的字体大小通过CSS类定义，并非元素的内联style属性，所以text.style.fontSize会返回空字符串，导致第一次执行calc(${text.style.fontSize} + 1px)时生成无效的CSS表达式calc( +1px)，浏览器无法解析。
• 即便后续手动设置了内联样式，反复嵌套calc会让样式字符串冗余，也容易出现解析问题。

推荐两种可靠的解决方式：

方案1：获取计算后的样式并转换为数值 #

用window.getComputedStyle获取元素当前实际生效的字体大小，转成数值后再做加减操作：

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

large.addEventListener('click', () => {
    const currentSize = parseFloat(window.getComputedStyle(text).fontSize);
    text.style.fontSize = `${currentSize + 1}px`;
});

low.addEventListener('click', () => {
    const currentSize = parseFloat(window.getComputedStyle(text).fontSize);
    // 可添加最小字号限制，避免字体过小
    text.style.fontSize = `${Math.max(12, currentSize - 1)}px`;
});

方案2：维护独立的字体大小变量 #

直接用变量跟踪当前字体大小，初始值和CSS保持一致，操作更高效：

const text = document.querySelector('.text');
const large = document.querySelector('.large');
const low = document.querySelector('.low');
// 初始值与CSS中的fontSize同步
let fontSize = 36;

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

low.addEventListener('click', () => {
    // 限制最小字号，防止无限缩小
    fontSize = Math.max(12, fontSize - 1);
    text.style.fontSize = `${fontSize}px`;
});

HTML #

<body class="sneg">
    <button class="large">Large</button>
    <button class="low">Low</button>
    <div class="text">Нажми меня</div>
    <script src="./main2.js"></script>
</body>

CSS #

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

内容的提问来源于stack exchange，提问作者Vladimir