Задать вопрос
@thekunichka

Изменение CSS стилей элемента в JS?

В 2015 году изменять стили напрямую через JavaScript считалось некорректным способом, все рекомендовали изменять стили элемента путём добавления дополнительного CSS класса с уже заданными стилями. По причине того, что при обращении к элементу в JS и изменении стилей методом style DOM дерево полностью перерисовывается.

Так вот на сегодняшний день в 2023-ем году что-то изменилось? Я всё по прежнему должен создавать дополнительный класс или же устанавливать атрибут со стилями, даже когда я меняю 1-2 стиля?
  • Вопрос задан
  • 1315 просмотров
Подписаться 2 Простой 1 комментарий
Решение пользователя iljaGolubev К ответам на вопрос (2)
@iljaGolubev
Ничего не изменилось: вы по-прежнему можете изменять стили напрямую у элемента.
при обращении к элементу в JS и изменении стилей методом style DOM дерево
Не скажу как раньше было, но и сейчас при неудачной вёрстке можно вызвать reflow для всего документа даже при применении класса. Изменение шрифта и так и так заставит браузер что-то пересчитать.
Другое дело, что сейчас есть техники позволяющие минимизировать вычисления: сказать браузеру, что пересчитывать нужно только определённую часть (утрирую).

Есть tailwindcss с новым (по отношению к 2015 году) подходом - чтобы поменять 1-2 стиля нужно добавить/удалить 1-2 класса. Часто это удобнее.

Используя классы вместо style код становится понятнее, легче поменять значения для повторяющихся стилей, следовательно меньше багов.

Впрочем, от style всё равно не уйти полностью. Например, динамически высчитываемые анимации - только class не обойтись.
Ответ написан
Комментировать