javascript - 如何在 JS 中定位 CSS(而不是注入(inject) HTML)？

Question

我正在构建一个简单的聊天机器人。在从服务器收到的每条新消息中，都会创建一个新的 HTML 元素并将其推送到浏览器。

因此，例如，消息 1 将是:

 <div class="message-computer"><p>Hi, how are you?</p></div>

然后您(用户)键入/发送一条消息，显示为:

 <div class="message-user"><p>I am good, thanks!</p></div>

等等等等。

我正在尝试添加一个按钮来更改所有现有聊天消息和来自计算机的任何新传入消息的背景颜色。

如果我为 .message-computer 编辑 CSS，这将起作用。不过，我希望能够在两种颜色之间切换。

所以，我在我的 HTML 中添加了一个按钮，它链接到这个 javascript :

<script>
function changeClass(){

      var myElements = document.querySelectorAll(".message-computer");
      for (var i = 0; i < myElements.length; i++) {
        myElements[i].style.color = "black";
        myElements[i].style.backgroundColor = "yellow";
      }

    }
  </script>

这种方法 - 它将 CSS 注入(inject)到现有元素中 -

<div class="message-computer" style="color: black; background-color: yellow;"><p>Hi, how are you?</p></div>

不过它根本不适用于新消息。

如何让它适用于任何新消息和传入消息？我已尝试设置父元素，但由于为每个新元素创建了一个新的 div，所以这不起作用。

Answer 1

您不应为每个元素添加新样式，而应定义不同的样式并简单地在状态之间切换。

// Select input (checkbox)
const checkBox = document.querySelector('label#darkMode > input')

// Define a function, which handles the event (arrow function)
const handleDarkModeChange = (event) => {
  if(event.target.checked) {
    document.body.classList.add('darkMode');
  }
  else {
    document.body.classList.remove('darkMode');
  }
}

// Adds an event listener
checkBox.addEventListener('change', handleDarkModeChange)

body.darkMode {
  background-color: #000
}

.darkMode p.user {
  color: green;
}

.darkMode p.computer {
  color: yellow;
}

<div class="chatLog">
  <p class="user">Hi, I'm a user</p>
  <p class="computer">Nice, I'm a computer</p>
</div>
<input type="text" placeholder="Type some text...">
<hr>

<label id="darkMode">
  Dark mode
  <input type="checkbox">
</label>