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

Question

[thekunichka]

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

Так вот на сегодняшний день в 2023-ем году что-то изменилось? Я всё по прежнему должен создавать дополнительный класс или же устанавливать атрибут со стилями, даже когда я меняю 1-2 стиля?

Comments

[archelon]

Бывают случаи, когда этого не избежать. Например (первое, что пришло в голову), нужно при изменении размера экрана «на лету» вычислять размер какого-то блока.
Во всех остальных случаях проще и эффективнее изменить класс элемента (active, hidden, error, success и т.п.).

Answer 1

[iljaGolubev]

Ничего не изменилось: вы по-прежнему можете изменять стили напрямую у элемента.

при обращении к элементу в JS и изменении стилей методом style DOM дерево

Не скажу как раньше было, но и сейчас при неудачной вёрстке можно вызвать reflow для всего документа даже при применении класса. Изменение шрифта и так и так заставит браузер что-то пересчитать.
Другое дело, что сейчас есть техники позволяющие минимизировать вычисления: сказать браузеру, что пересчитывать нужно только определённую часть (утрирую).

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

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

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

Answer 2

[Dyatchin Dmitry]

Конечно, вот пример того, как изменить CSS стили элемента в JavaScript:

const element = document.getElementById("my-element");
element.style.color = "red";

Этот код изменит цвет текста элемента с #000000 на #FF0000.

Вы также можете использовать свойство style для изменения других свойств CSS элемента, таких как размер шрифта, ширина и высота. Например, следующий код изменит размер шрифта элемента на 24 пикселя:

const element = document.getElementById("my-element");
element.style.fontSize = "24px";

Вы также можете использовать метод setProperty() для изменения свойств CSS элемента. Например, следующий код изменит цвет текста элемента на красный и размер шрифта на 24 пикселя:

const element = document.getElementById("my-element");
element.setProperty("color", "red");
element.setProperty("fontSize", "24px");

Я надеюсь, это поможет!

Comments

[Сергей delphinpro]

вопрос о производительности при изменении элемента через класс и через style.

[Stalker_RED]

Ivan, вопрос не про количество строк, это абсурд - мерять производительность строками. Вопрос про reflow/repaint/composite.

[Stalker_RED]

Ivan, проверим в профайлере? Попросим чатгпт сгенерировать десяток классов со случайными свойствами, создадим аналоги этих классов в виде js-кода, возьмём страницу тостера, например, и к какому-то блоку будем это все применять, засекая время профайлером. Результат вас удивит, причем не только в хроме.

[Stalker_RED]

Ivan, да лучше почитай уже существующую статью о том, насколько долго выполняется repaint, например. А его можно вызвать изменением одного свойства.