Question

我想更改许多html对象的css属性（但在本示例中，我只用body进行了简化。我的目标是在当前模式为亮的情况下显示暗模式，或者在当前模式为亮的情况下显示亮模式。模式是黑暗的。我的javascript函数不起作用。

debug.html ：

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="debug.css">
    <script src="darkmode.js"></script>

  </head>

  <body id="bodyElem" class="my-body light-mode">

      <h1>Settings</h1>
      <p>Dark mode:</p>

      <button type="button" onclick="invertMode()">click</button>

  </body>

</html>

debug.css ：

.my-body.light-mode{
  background-color: yellow;
}

.my-body.dark-mode{
  background-color: black;
}

darkmode.js ：

function invertMode() {
  var body = document.getElementById("bodyElem");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

Answer 1

您需要为ID标签添加一个<body>才能使用您的代码找到它。

<body id="bodyElem" class="light-mode">

并使用以下命令进行访问：

var body = document.getElementById("bodyElem");

如果您需要访问多个元素，则可以使用其CSS类名称，例如：

document.getElementsByClassName("CLASSNAMEHERE");

然后将它们全部循环以应用所需的更改。

您将使用.classList.remove("CLASSNAME")删除单个类，并使用.classList.add("CLASSNAME")将单个类添加到DOM元素

这是一个完整的样本小提琴： https://jsfiddle.net/j3o8Lt5k/1/

js：element.className不起作用（创建暗模式）

1 个答案: