点击按钮切换div ID实现暗黑模式功能故障排查

DevOps 小满

2026-8-14

暗黑模式切换功能修复方案

原代码存在的问题

错误的DOM元素获取方式：document.div不是合法的DOM API，无法正确定位目标容器元素
拼写错误：JS代码中documento是笔误，正确应为document
缺失目标容器：原HTML中未包含需要切换ID的<div id="Sito">元素，这是功能失效的核心前提

修复后的完整代码

HTML（补全目标容器）

<div id="Sito">
  <!-- 此处放置你的页面内容 -->
</div>
<button id="nottebottone" class="notte">Attiva modalità notturna</button>

CSS（保留原样式逻辑）

#Sito {
    max-width: 1024px;
    margin: auto;
    text-align: center;
    background-color: rgb(221, 241, 235);
    border: black ridge;
    border-width: 0.03cm;
}

#Nightmode {
    max-width: 1024px;
    margin: auto;
    text-align: center;
    background-color: rgb(0, 0, 0);
    border: rgb(255, 255, 255) ridge;
    border-width: 0.03cm;
    color: white;
}

JavaScript（修复逻辑与API调用）

// 提前获取DOM元素引用，避免重复查询
const bottonedarkmode = document.getElementById("nottebottone");
const sitoContainer = document.getElementById("Sito");

function attivadarkmode() {
    // 切换容器ID并同步更新按钮文本
    if (sitoContainer.id === "Sito") {
        sitoContainer.id = "Nightmode";
        bottonedarkmode.textContent = "Disattiva modalità notturna";
    } else {
        sitoContainer.id = "Sito";
        bottonedarkmode.textContent = "Attiva modalità notturna";
    }
}

// 绑定按钮点击事件
bottonedarkmode.addEventListener('click', attivadarkmode);