Как изменить CSS-стили? Ответ очевиден — отредактировать CSS-файл. Возможно, после этого понадобится компиляция. Затем нужно обновить стили во время выполнения, изменив атрибуты элемента, такие как class и aria-*.
Хотя этот ответ неполный, подумайте над следующими вопросами:
- Как обновить стили во время выполнения, основываясь на взаимодействии с пользователем, а не на предустановленных значениях? Сгенерировать уникальные имена классов для каждой возможной комбинации цветов нереально.
- Что, если у вас нет доступа к таблицам стилей или HTML? Например, если сайт сгенерирован конструктором сайтов со сторонними CSS-файлами, изобилующими свойствами !important.
В этой статье мы рассмотрим четыре способа обновить CSS-стили при помощи JavaScript. Также мы кратко разберем, в каких случаях эти способы стоит применять. Наконец, мы оценим их с точки зрения CSS-сложности, т. е. того, насколько просто понять и изменить код в каждом случае.
Используйте встроенные стили
До изобретения CSS для стилизации веб-страниц использовались теперь уже устаревшие HTML-атрибуты, такие как color, background и border. Встроенный CSS — духовный преемник этих атрибутов. При таком подходе свойства CSS задаются через атрибут style элемента.
Два следующих способа изменить размер шрифта для элемента hero равнозначны:
document.getElementById('hero').style = 'font-size: 12rem;';
document.getElementById('hero').style.fontSize = '12rem';
Использование JavaScript для обновления встроенного CSS в целом считается плохой практикой. Причин для этого несколько:
- Нарушается разделение между стилями и контентом, из-за чего становится сложнее читать и изменять документ.
- При таком подходе CSS-селекторы не могут формировать семантические абстракции.
- Без селекторов обновление нескольких элементов на странице потребует прохода по всем элементам, а это отнимает время. К тому же, таким образом можно допустить ошибки.
- Повторяющиеся стили раздувают ваш HTML.
- У вас не будет доступа к псевдоэлементам и псевдоклассам, они доступны только через CSS-селекторы.
В настоящее время мы наблюдаем возрождение встроенного CSS-lite через атомарные CSS-фреймворки, такие как Tailwind CSS. Атомарные фреймворки используют имена классов CSS, которые переводятся в одно CSS-свойство и основываются на генерации компонентов для повторного использования стилей при помощи JS. Это позволяет избавиться от проблем 3, 4 и 5 из приведенного выше списка. Но проблему раздувания HTML это все равно не решает.
Хотя встроенные CSS-стили в целом вредны, их применение имеет одно преимущество. Чтобы внести изменение, вам не нужно иметь доступ к таблицам стилей. Поэтому с их помощью вполне можно вносить некоторые правки по ходу работы.
Когда стоит применять встроенный CSS
- Для обновления стилей отдельного элемента во время выполнения.
- Для быстрой проверки чего-либо.
- Когда таблицы стилей недоступны.
Используйте HTML-атрибуты
Можно изменять и другие атрибуты элементов, не только style. Это самый популярный способ, он позволяет создавать переиспользуемые и семантически значимые стили. Вот несколько примеров:
// toggles HTML semantic state
document.getElementById('cta').disabled = true;
// a aria based semantic button state
document.getElementById('cta').ariaExpanded = "true";
// a class based semantic primary variation
document.getElementById('cta').classList.toggle('primary');
Тут особо нечего добавить. Вероятно, вы и так пользуетесь этим методом. Такой код и понять просто, и изменить легко. К тому же, в нашем распоряжении множество CSS-методологий для контроля над его сложностью.
Но я хочу отметить, что примеры в приведенном выше коде расположены в порядке их значимости. Прежде чем прибегнуть к состояниям на основе классов, стоит обратиться к состояниям на основе атрибутов HTML. Теперь, когда селектор :has() уже на горизонте, это стало проще.
Когда стоит модифицировать атрибуты помимо style
Всегда, когда у вас есть доступ к таблицам стилей и предопределенные стили.
Используйте CSSOM
Следующий метод изменения CSS посредством JavaScript можно сравнить со скальпелем в наборе инструментов фронтендера. Мы можем напрямую изменять объекты CSS.
Два предыдущих метода для изменения стилей модифицируют HTML DOM. Но в некоторых случаях проще изменить напрямую CSS Object Model (CSSOM).
Обратившись к объекту styleSheets документа, мы можем избирательно менять стили сайта, используя всю мощь CSS. Например:
const thirdPartyStylesheet = document.styleSheets[0]; //index 15 rule color: red !important; thirdPartyStylesheet.deleteRule(15);
Можно даже добавить новые динамически генерируемые стили при помощи конструктора CSSStyleSheet. По своему опыту могу сказать, что это наилучший вариант, когда вы имеете дело со сторонними таблицами стилей или конструктором сайтов, т. е., когда ваши возможности работы с CSS ограничены.
Когда вы засоряете свои встроенные стили многочисленными !important для перезаписи сторонних стилей, происходит жуткое разрастание CSS-селекторов. Изменение CSSOM позволяет этого избежать. Этот подход также может быть эффективнее перебора в цикле нескольких элементов для динамического обновления их стилей.
Основной недостаток CSSOM-подхода — такой код труден для понимания и отладки. Для измененного CSSOM нет поддержки в инструментах разработчика. И, если только вы не задокументировали свои шаги крупным шрифтом, ваш код может довести будущего мейнтейнера до ручки. Так же, как и скальпель, этот метод нужно использовать редко и осторожно.
Когда стоит модифицировать CSSOM
Больше всего этот способ подходит не для внесения новых стилей, а для удаления сторонних. Также с его помощью можно изменить стили, которые вы не контролируете.
Используйте пользовательские свойства CSS
Последний способ динамического обновления CSS-стилей предполагает применение пользовательских свойств CSS. Хотя технически тут не используются никакие новые APIs, применение пользовательских свойств существенно отличается от предыдущих подходов.
Пользовательские свойства можно использовать с любым из предыдущих методов:
const themeColor = document.getElementById('color-picker').value;
// use with inline style
document.body.style=`--theme-color: ${themeColor};`;
// use in CSSOM
const stylesheet = document.styleSheets[0];
stylesheet.insertRule(`:root { --theme-color: ${themeColor}; }`);
Пользовательские свойства элемента наследуются его потомками. Мы можем использовать их со встроенными стилями и не беспокоиться о выборке и переборе в цикле всех элементов в DOM. Все, что нам нужно, это найти их общего предка. В силу этой особенности пользовательские свойства также могут применяться для изменения псевдоэлементов при помощи встроенных стилей.
Самые значительные минусы применения пользовательских свойств — необходимость доступа к таблицам стилей и необходимость планирования своих действий. При благоразумном использовании с их помощью можно изменить несколько стилей за одно обновление. Пример — генерация целой цветовой палитры путем обновления одного цвета.
Применение пользовательских свойств требует такой же продуманности (если не большей), что и подход с изменением атрибутов элемента, но с его помощью можно менять стили во время работы кода.
Поддержка кода с пользовательскими свойствами проще, чем кода с измененной CSSOM: тут нужно отслеживать меньше изменений. Но при этом вам нужен доступ к таблицам стилей.
Когда стоит применять пользовательские свойства
- Вам нужно внести комплексные изменения стилей во время выполнения программы.
- Вы хотите создать новые отношения между стилевыми свойствами.
- Вам нужно пробить Shadow DOM, чтобы стилизовать множество веб-компонентов.
Итоги
Когда вам в очередной раз понадобится изменить CSS-стили при помощи JavaScript, спросите себя:
- Это предопределенное изменение или значение стиля определяется динамически во время работы программы?
- Я перекрываю существующие сторонние стили?
- Мне нужно изменить один элемент или несколько, включая псевдоэлементы и классы?
- Хочу ли я, чтобы это изменение повлияло на несколько производных свойств или затронуло несколько элементов на странице?
Исходя из ответов на эти вопросы, можно подобрать наиболее подходящий способ внесения изменений в CSS-стили.
Перевод статьи «How to Change CSS Styles with JavaScript – From Basic to Advanced Methods».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]