Html style javascript function

Как изменить 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 Style

Summary: in this tutorial, you will learn how to use the style property to manipulate the inline style of the HTML elements.

Setting inline styles

To set the inline style of an element, you use the style property of that element:

element.styleCode language: CSS (css)

The style property returns the read-only CSSStyleDeclaration object that contains a list of CSS properties. For example, to set the color of an element to red , you use the following code:

element.style.color = 'red';Code language: JavaScript (javascript)

If the CSS property contains hyphens ( — ) for example -webkit-text-stroke you can use the array-like notation ( [] ) to access the property:

element.style.['-webkit-text-stock'] = 'unset';Code language: JavaScript (javascript)

The following table shows the common CSS properties:

CSS	JavaScript
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
clip	clip
color	color
cursor	cursor
display	display
filter	filter
float	cssFloat
font	font
font-family	fontFamily
font-size	fontSize
font-variant	fontVariant
font-weight	fontWeight
height	height
left	left
letter-spacing	letterSpacing
line-height	lineHeight
list-style	listStyle
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style-type	listStyleType
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
overflow	overflow
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
page-break-after	pageBreakAfter
page-break-before	pageBreakBefore
position	position
stroke-dasharray	strokeDasharray
stroke-dashoffset	strokeDashoffset
stroke-width	strokeWidth
text-align	textAlign
text-decoration	textDecoration
text-indent	textIndent
text-transform	textTransform
top	top
vertical-align	verticalAlign
visibility	visibility
width	width
z-index	zIndex

To completely override the existing inline style, you set the cssText property of the style object. For example:

element.style.cssText = 'color:red;background-color:yellow'; Code language: JavaScript (javascript)

Or you can use the setAttribute() method:

element.setAttribute('style','color:red;background-color:yellow');Code language: JavaScript (javascript)

Once setting the inline style, you can modify one or more CSS properties:

element.style.color = 'blue';Code language: JavaScript (javascript)

If you do not want to completely overwrite the existing CSS properties, you can concatenate the new CSS property to the cssText as follows:

element.style.cssText += 'color:red;background-color:yellow';Code language: JavaScript (javascript)

In this case, the += operator appends the new style string to the existing one.

The following css() helper function is used to set multiple styles for an element from an object of key-value pairs:

function css(e, styles) < for (const property in styles) e.style[property] = styles[property]; >Code language: JavaScript (javascript)

You can use this css() function to set multiple styles for an element with the id #content as follows:

let content = document.querySelector('#content'); css(content, < background: 'yellow', border: 'solid 1px red'>);Code language: JavaScript (javascript)

The following example uses the style object to set the CSS properties of a paragraph with the id content :

html> html> head> meta charset="utf-8"> title>JS Style Demo title> head> body> p id="content">JavaScript Setting Style Demo! p> script> let p = document.querySelector('#content'); p.style.color = 'red'; p.style.fontWeight = 'bold'; script> body> html>Code language: HTML, XML (xml)

• First, select the paragraph element whose id is content by using the querySelector() method.
• Then, set the color and font-weight properties of the paragraph by setting the color and fontWeight properties of the style object.

Getting inline styles

The style property returns the inline styles of an element. It is not very useful in practice because the style property doesn’t return the rules that come from elsewhere e.g., styles from an external style sheet.

To get all styles applied to an element, you should use the window.getComputedStyle() method.

Summary

• Use the properties of element.style object to set the inline CSS properties for the HTML element.

Источник