JavaScript键盘事件问题：上下箭头无法调整气球元素字号

嘿，你的代码里有几个容易忽略的小问题导致字号没变化，我帮你理清楚并修正：

问题1：p元素无法接收键盘事件 #

默认情况下，<p>元素是不可聚焦的，所以你绑定在它上面的keydown事件根本不会触发。有两种解决方式：

• 给p元素添加tabindex="0"属性，让它可以被聚焦（点击气球后就能响应键盘）；
• 把键盘事件绑定到document上，这样不管页面焦点在哪，按下箭头都能生效（体验更流畅）。

问题2：字号字符串无法直接参与算术运算 #

你用balloon.style.fontSize拿到的是类似"24px"的字符串，直接用size * 1.1会得到NaN（JavaScript没法对字符串做乘法）。必须先提取数值部分，转成数字再计算。

问题3：默认字号的比较逻辑错误 #

defaultSize是"24px"字符串，你用size > defaultSize是在做字符串比较，不是数值比较。比如"100px"和"24px"字符串比较时，"100px"会被认为更小（因为字符"1"的ASCII码比"2"小），这完全不符合数值逻辑。得转成数字再比较。

修正后的完整代码 #

HTML部分（给p加tabindex，或者用document事件） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event tasks</title>
</head>
<body>
    <!-- 添加tabindex让p可聚焦，或者直接绑定document事件 -->
    <p style="font-size: 24px;" tabindex="0"></p>
    <button id="temp">Temp</button>
    <script src="tasks.js"></script>
</body>
</html>

JavaScript部分 #

const balloon = document.querySelector('p');
// 提取初始字号的纯数值（去掉px）
const defaultSize = parseFloat(balloon.style.fontSize);

// 绑定到document，无需聚焦也能响应键盘操作
document.addEventListener('keydown', event => {
    // 获取当前字号的纯数值
    let currentSize = parseFloat(balloon.style.fontSize);
    
    if (event.key === 'ArrowUp') {
        setSize(currentSize * 1.1);
        event.preventDefault(); // 防止页面滚动
    } else if (event.key === 'ArrowDown') {
        // 用数值比较，确保不小于初始字号
        if (currentSize > defaultSize) {
            setSize(currentSize * 0.9);
            event.preventDefault();
        }
    }
});

function setSize(newSize) {
    // 把数值转回带px的字符串设置给元素
    balloon.style.fontSize = `${newSize}px`;
}

// 测试按钮保持不变
document.getElementById('temp').addEventListener('click', () => {
    setSize(40);
});

这样修改后，按下上箭头会每次增大10%字号，下箭头会每次减小10%（不会小于初始的24px），测试按钮也能正常设置字号啦～

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