Html element change style

Как изменить CSS-стили при помощи JavaScript

Как изменить 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 в целом считается плохой практикой. Причин для этого несколько:

1. Нарушается разделение между стилями и контентом, из-за чего становится сложнее читать и изменять документ.
2. При таком подходе CSS-селекторы не могут формировать семантические абстракции.
3. Без селекторов обновление нескольких элементов на странице потребует прохода по всем элементам, а это отнимает время. К тому же, таким образом можно допустить ошибки.
4. Повторяющиеся стили раздувают ваш HTML.
5. У вас не будет доступа к псевдоэлементам и псевдоклассам, они доступны только через 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: $;`; // use in CSSOM const stylesheet = document.styleSheets[0]; stylesheet.insertRule(`:root < --theme-color: $; >`);

Пользовательские свойства элемента наследуются его потомками. Мы можем использовать их со встроенными стилями и не беспокоиться о выборке и переборе в цикле всех элементов в DOM. Все, что нам нужно, это найти их общего предка. В силу этой особенности пользовательские свойства также могут применяться для изменения псевдоэлементов при помощи встроенных стилей.

Самые значительные минусы применения пользовательских свойств — необходимость доступа к таблицам стилей и необходимость планирования своих действий. При благоразумном использовании с их помощью можно изменить несколько стилей за одно обновление. Пример — генерация целой цветовой палитры путем обновления одного цвета.

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

Поддержка кода с пользовательскими свойствами проще, чем кода с измененной CSSOM: тут нужно отслеживать меньше изменений. Но при этом вам нужен доступ к таблицам стилей.

Когда стоит применять пользовательские свойства

• Вам нужно внести комплексные изменения стилей во время выполнения программы.
• Вы хотите создать новые отношения между стилевыми свойствами.
• Вам нужно пробить Shadow DOM, чтобы стилизовать множество веб-компонентов.

Итоги

Когда вам в очередной раз понадобится изменить CSS-стили при помощи JavaScript, спросите себя:

• Это предопределенное изменение или значение стиля определяется динамически во время работы программы?
• Я перекрываю существующие сторонние стили?
• Мне нужно изменить один элемент или несколько, включая псевдоэлементы и классы?
• Хочу ли я, чтобы это изменение повлияло на несколько производных свойств или затронуло несколько элементов на странице?

Исходя из ответов на эти вопросы, можно подобрать наиболее подходящий способ внесения изменений в CSS-стили.

Источник

Javascript Change HTML Element Styles Tutorial

In this Javascipt tutorial we learn how to change HTML element styles with Javascript by accessing the style object.

We also discuss some rules when working with the style object and its properties.

How to change HTML element styles

Now that we know how to select HTML elements , we can perform several types of operations on them.

For example, we can manipulate and change HTML element styles with Javascript by tapping into the style object of the selected element.

The style object contains all the CSS properties we need to change a specific style on an element.

    In the example above, we change the color property of the heading and add a background color and some padding to the paragraph.

Every style can be changed from Javascript, however the property names might look a little different from what we’re used to.

As mentioned in the Variables & Constants lesson , Javascript naming conventions tend to use camel case. Any properties with multiple words will use camel case instead of the dash operator.

   Another important point is that the property values must be specified as strings. If we don’t use a string, the property won’t change and Javascript will raise an error.

 The example above doesn’t use a string when trying to change the font size, so Javascript raises an error.

 Uncaught SyntaxError: Invalid or unexpected token

The error is a little confusing but basically it means that Javascript was expecting a » from the beginning of a string, but got something else instead.

So, if a property has multiple words, converting from CSS to Javascript is easy.

How to add & remove classes

When working with HTML, CSS and Javascript, we typically want a separation of concerns. What this means is that we want to separate the structure (HTML), style (CSS) and behavior (Js) from each other.

We shouldn’t change styles directly from Javascript. That would combine style and behavior, which is considered a bad practice.

Instead, we write classes in CSS and add them to an HTML element with Javascript with the classList property.

• classList.add() will add the specified class to a selected element.
• classList.remove() will remove the specified class from a selected element.
• classList.toggle() will add/remove the specified class when invoked.

The add() method takes the class name we want to add as an argument.

    In the example above, the ‘.hidden’ class will hide whichever element it’s attached to. In the hide() function we tell Javascript that we want to add this class to the div element.

In the last statement we add an event listener to the button that will invoke the hide() function when the button is clicked.

If you don’t know about event listeners, don’t worry about it for now. We cover them later on in the Event Listeners lesson .

We can also remove a class from an element with the remove() method. This method takes the class name we want to remove as an argument.

Источник