Как можно изменить стили класса в реальном времени?

Question

[rinaz22]

Всем привет. Например есть блок:

<div class="content">
...
</div>

Со след. стилями:

.content {
  color: #2b2b2b;
  font-size: 18px;
}

Вопрос: Можно ли изменить color с помощью JS, не добавляя новый color в атрибут style? Т.е. поменять стиль класса, а не добавлять новый через атрибут style.

Answer 1

[RAX7]

https://developer.mozilla.org/en-US/docs/Web/API/C...

Comments

[Kovalsky]

А в чем суть удаления и добавления правила заново? Не знаю насколько это влияет на производительность, но их можно же просто модифицировать

[RAX7]

Kovalsky, суть в том, что я поторопился с ответом =) Ты прав, менять правила на лету гораздо удобней и наверняка быстрее. Обновил ответ.

Answer 2

[Егор Андреев]

var elem = document.getElementById("content");
elem.style.color = "Ваш цвет";

Comments

[rinaz22]

Т.е. поменять стиль класса, а не добавлять новый через атрибут style.

[Ярослав Иванов]

rinaz22, нет

[Ярослав Иванов]

rinaz22, удаляете класс добавляете новый

[rinaz22]

Ярослав Иванов, мне надо менять стиль указанный в поле и после клика по кнопке. Но до этого надо получить все стили и заполнить в текстовом поле

[Ярослав Иванов]

rinaz22, внятно объясните задачу.

Answer 3

[imdeveloper]

Манипулироввать используя CSS DOM. https://developer.mozilla.org/ru/docs/Web/API/CSS_...
Подробнее как https://www.w3.org/wiki/Dynamic_style_-_manipulati...