更新数字内容时h1元素位置偏移问题求助（附代码截图）

我正在开发一款调用Reddit API的应用，输入帖子编号即可获取对应帖子的全部信息。目前制作了一个自定义数字输入组件，但遇到了问题：更新数字时，页面中的h1元素会发生位置偏移。

组件显示状态：

• 页面加载时：初始显示数字0
• 更新数字后：数字所在的h1位置出现偏移

以下是相关代码：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>the most stupidest app ive ever made</title>
    <script defer src="input.js"></script>
    <script defer src="openModal.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200;800&display=swap" rel="stylesheet"> 
</head>
<body>
    <!-- intro -->
    <h1>the most stupidest app ive ever made</h1>
    <p>this app is from a reddit post with random knowledge; enter the number of the reddit post and you'll get it's info:</p><br>

    <!-- buttons -->
    <div>
        <button class="add-subtract"><img src="add.svg" width="50" height="50" title="add" id="add"></button>
        <button title="number" id="numberBtn"><h1 id="number">0</h1></button>
        <button class="add-subtract"><img src="subtract.svg" width="50" height="50" title="subtract" id="subtract"></button>
    </div>

    <!-- da modal -->
    <dialog id="modal">
        <input type="number" id="numberText"><br>
        <button id="done"><img src="./check.svg"></button>
    </dialog>
</body>
</html>

CSS代码 #

body, h1 {
    background: rgb(34, 116, 165);
    color: rgb(250, 250, 255);
    font-family: 'Dosis', sans-serif;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    resize: none;
}

div, button {
    display: flex;
    justify-content: center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

JavaScript代码 #

const numberText = document.querySelector("#numberText")
const modalOpenBtn = document.querySelector("#numberBtn")
const modal = document.querySelector("#modal")
const done = document.querySelector("#done")

modalOpenBtn.addEventListener("click", () => {
    modal.showModal()
})

done.addEventListener("click", () => {
    let number = document.querySelector("#number")
    number.textContent = numberText.value;
    modal.close()
})

// The code below is in another file
const add = document.querySelector('#add');
const subtract = document.querySelector('#subtract');
let number = document.querySelector('#number');

add.addEventListener('click', () => {
    number.innerHTML = `<h1>${parseInt(number.textContent) + 1}</h1>`;
})

subtract.addEventListener('click', () => {
    if (parseInt(number.textContent) <= 0) {
        alert('Cannot subtract from 0');
    } else {
        number.innerHTML = `<h1>${parseInt(number.textContent) - 1}</h1>`;
    }
})

问题原因 #

核心问题出在加减按钮的JS逻辑：初始状态下#number本身就是<h1>标签，但点击加减按钮时，你在它内部又嵌套了一层新的<h1>标签。多层嵌套的<h1>会继承浏览器默认的margin/padding样式，导致元素尺寸变化，引发位置偏移。同时模态框的更新逻辑是直接修改文本，两种更新方式的DOM结构不一致，进一步加剧了样式混乱。

修复步骤 #

1. 统一DOM结构：始终保持#number为单个<h1>标签，禁止内部嵌套新的<h1>
2. 修改加减按钮逻辑：直接修改#number的textContent而非innerHTML
3. 可选样式优化：给数字按钮设置固定尺寸和对齐规则，避免文本长度变化导致的偏移

修改后的代码 #

优化后的JavaScript

// 模态框逻辑
const numberText = document.querySelector("#numberText")
const modalOpenBtn = document.querySelector("#numberBtn")
const modal = document.querySelector("#modal")
const done = document.querySelector("#done")

modalOpenBtn.addEventListener("click", () => {
    modal.showModal()
})

done.addEventListener("click", () => {
    let number = document.querySelector("#number")
    // 确保输入为有效数字，默认设为0
    const inputVal = parseInt(numberText.value) || 0
    number.textContent = inputVal;
    modal.close()
})

// 加减按钮逻辑
const add = document.querySelector('#add');
const subtract = document.querySelector('#subtract');
let number = document.querySelector('#number');

add.addEventListener('click', () => {
    number.textContent = parseInt(number.textContent) + 1;
})

subtract.addEventListener('click', () => {
    const currentVal = parseInt(number.textContent)
    if (currentVal <= 0) {
        alert('Cannot subtract from 0');
    } else {
        number.textContent = currentVal - 1;
    }
})

可选CSS优化

/* 固定数字按钮尺寸，避免偏移 */
#numberBtn {
    align-items: center;
    min-width: 80px;
}

#number {
    margin: 0; /* 清除h1默认外边距 */
    text-align: center;
}

效果验证 #

修改后，无论通过加减按钮还是模态框更新数字，#number的DOM结构始终保持一致，样式统一，不会再出现位置偏移问题。

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