Как мне изменить один из классов в элементе с Javascript

Question

Если у меня есть материализованная библиотека и элемент "h1", как мне изменить только цвет фона "черный" на "белый", используя javascript? Например, используя кнопку.

<h1 class="black red-text">Test</h1>

Answer 1

Дайте элементу идентификатор:

<h1 id="test" class="black red-text">Test</h1>

Затем вы можете выбрать его следующим образом:

var el = document.getElementById('test');

Затем вы можете просто удалить класс черный с помощью этого кода:

el.classList.remove('black');

И добавить новый класс:

el.classList.add('white');

Answer 2

Вот ответ.

Выберите элемент с помощью document. getElementById

и при нажатии кнопки

Вы можете использовать title.classList.toggle ("white") ; переключить данный класс.

const button = document.getElementById('btn');
const title = document.getElementById('title');

btn.addEventListener('click', () => {
  title.classList.toggle("white");
});

.red-text {
  color: red;
}

.black {
  background-color: #000;
}

.white {
  background-color: #fff;
}

<h1 id="title" class="black red-text">Test</h1>
<button id="btn">Change Bg</button>

Answer 3

Надеюсь, это решит вашу проблему. просто проверьте условие, если класс уже существует, если не добавить его.

let h1 = document.querySelector(".red-text");
let btn = document.querySelector("#btn");


function changeColor(){
    if(h1.classList.contains("black")){
      h1.classList.remove("black");
      h1.classList.add("white"); 
    }else{
         h1.classList.add("black");
      h1.classList.remove("white"); 
    }
}

btn.addEventListener("click", changeColor);

.black{
  background: black;
  color: red
}

.white{
  background: white;
}

<h1 class="black red-text">Test</h1>

<button id="btn">Change Color</button>

Answer 4

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

document.querySelector('h1.black').classList.add('white');

У Materialise уже есть обширный массив цветовых классов , поэтому нет необходимости создайте новые.

Codepen здесь :

И просто для пояснения:

document.querySelector('h1.black') - это находит элемент с соответствующим классом. Вы также можете использовать ID, чтобы быть более точным c, тогда как .classList извлекает все классы, примененные к этому элементу (в данном случае .black и .red-text) и .add('white') - ну, это добавляет класс, который вы указали в скобках.

Answer 5

Создать функцию и класс white. Внутри функции используйте document.getElementsByClassName. Поскольку document.getElementsByClassName - это коллекция, поэтому для доступа к ней необходимо использовать индекс типа [0]

function changeColor() {
  document.getElementsByClassName("black")[0].classList.add('white')

}

.white {
  background: white !important;
}

.black {
  background: black;
}

.red-text {
  color: red;
}

<h1 class="black red-text">Test</h1>
<button onclick='changeColor()'>Change Color</button>