js: element.className не работает (создайте темный режим) - PullRequest
Новая
       1

js: element.className не работает (создайте темный режим)

1 голос
/ 24 марта 2019

Я хочу изменить свойства CSS многих html-объектов (но в этом примере я упростил только 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";
}

1 Ответ

0 голосов
/ 24 марта 2019

Вам понадобится добавить 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...