主页 / 问题 / 1208649
Accepted
iBullRay
Asked:2021-11-23 20:37:56 +0800 CST2021-11-23 20:37:56 +0800 CST

id 的值不会变回来

  • 772

有一个按钮，当按下它时，id应该从theme-white变为theme-black，但是当id改变时，再次按下按钮时，id从theme-black变为theme-white没有返回

问题是什么？

HTML：

<button onclick="mytheme();">Click</button><main id="theme-white"></main>

CSS：

main { width: 500px; height: 500px; margin: 50px; }#theme-white { background-color: red; }#theme-black { background-color: black; }button { width: 250px; height: 50px; }

JS：

function mytheme() {
  if (document.getElementById("theme-white").id == "theme-white") {
    document.getElementById("theme-white").id = "theme-black";
  }
  
  else if (document.getElementById("theme-black").id == "theme-black") {
    document.getElementById("theme-black").id = "theme-white";
  }
}
javascript

2 个回答

  1. 我想补充一点，这里有一个更简单的解决方案，即使用classList.toggle.

    此外，主题的 ID 不是最佳选择。

    而且最好还是用addEventListener（或者至少js里的onclick，但绝对不能直接在html里用这种方式<button onclick="mytheme(); ...，因为这个方法已经被弃用了，而且addEventListener的优势在于可以挂几个一个元素上的事件，稍后使用 removeEventListener 删除它们）

    const btn = document.getElementById('btn')
const main = document.getElementById('main')

function mytheme() {
  main.classList.toggle('theme-black')
}

btn.addEventListener('click', mytheme)
    main {
    width: 500px;
    height: 500px;
    margin: 50px;
}
.theme-white {
    background-color: red;
}
.theme-black {
    background-color: black;
}
button {
    width: 250px;
    height: 50px;
}
    <button id="btn">Click</button>
<main id="main" class="theme-white"></main>

    如果没有 addEventListener，它将如下所示：

    const btn = document.getElementById('btn')
const main = document.getElementById('main')

function mytheme() {
  main.classList.toggle('theme-black')
}

btn.onclick = mytheme
    main {
    width: 500px;
    height: 500px;
    margin: 50px;
}
.theme-white {
    background-color: red;
}
.theme-black {
    background-color: black;
}
button {
    width: 250px;
    height: 50px;
}
    <button id="btn">Click</button>
<main id="main" class="theme-white"></main>

    • 2
  2. Best Answer

    查看控制台中的错误。

    function mytheme() {
  if (document.getElementById("theme-white")) {
    document.getElementById("theme-white").id = "theme-black";
  } else if (document.getElementById("theme-black")) {
    document.getElementById("theme-black").id = "theme-white";
  }
}
    • 1

相关问题