Как настроить CSS (не вводить HTML) в JS?

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>

и т. Д. И т. П.

Я пытаюсь добавить кнопку для изменения цвета фона всех существующих сообщений чата и любых новых входящих сообщений с компьютера.

Это будет работать, если я отредактирую CSS для .message-computer. Я хочу иметь возможность переключаться между двумя цветами.

Итак, я добавил кнопку в свой 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 в существующие элементы, например, так:

<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>

Answer 2

Вы можете динамически создать таблицу стилей и добавить ее в документ, она будет действовать как обычная таблица стилей с правилами приоритета и будет вызывать любые изменения в соответствии с любыми определенными вами правилами:

function changeClass() {
  var sheet = document.createElement('style')
  sheet.innerHTML = ".message-computer {color: black; background-color: yellow;}";
  document.body.appendChild(sheet);
}

document.getElementById("change-style").addEventListener("click", changeClass);

//add a dummy message from computer
document.getElementById("add-message").addEventListener("click", function(){
  var p = document.createElement("p");
  p.textContent = "New Message";

  var newMessage = document.createElement("div");
  newMessage.appendChild(p);
  newMessage.classList.add("message-computer");

  document.getElementById("chat").appendChild(newMessage)
})

<button id="add-message">Add message</button>
<button id="change-style">Change style</button>

<div id="chat">
  <div class="message-computer">
    <p>Hi, how are you?</p>
  </div>
  <div class="message-user">
    <p>I am good, thanks!</p>
  </div>
</div>

Answer 3

Вы можете попробовать этот код.

Описание : сначала мы вызываем функцию при загрузке скрипта, загрузке окна или загрузке документа для стиля уже сгенерированного элемента.после этого я создаю кнопку с действием нажатия.нажмите кнопку, чтобы добавить динамический элемент и добавить тело, а затем снова вызвать функцию changeClass().это выглядит хорошо.

иначе вы пишете CSS для .message-computer{ background: yellow; color: black; }, это также хорошо для предыдущих решений.

== Спасибо ==

changeClass();

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";
    }
}

function addMsg() {
  var wrap=  document.createElement('div');
      wrap.classList +='message-computer';
  var p =  document.createElement('p');
      p.innerHTML = "Hi, how are you?";
      wrap.appendChild(p);
  document.getElementsByTagName('body')[0].appendChild(wrap);
  changeClass();
  
}

<button type="button" onClick="addMsg()">addMessage</button>
<div class="message-computer"><p>Hi, how are you?</p></div>
<div class="message-user"><p>I am good, thanks!</p></div>