Call css in javascript

Работа с CSS через Javascript

Получение всех CSS-свойств элемента ( метод window.getComputedStyle() )

Метод window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента после применения всех активных таблиц стилей и завершения базовых вычислений значений, которые они могут содержать.

Синтаксис метода window.getComputedStyle() :

• element — элемент (Element), CSS-свойства которого необходимо получить (вставка узлов, которые не являются элементами, например, #text , выдаст ошибку);
• pseudoElt (необязательный) — строка указывающая на найденный псевдоэлемент (опускается или null — для не псевдоэлементов).

Возвращённый объект style — «живой» объект CSSStyleDeclaration, который обновляется автоматически при изменении стилей элемента, только для чтения и может быть использован для инспектирования стиля элемента (включая описание из элемента или внешней таблицы стилей).

ВАЖНО! Для использования метода window.getComputedStyle() для какого-либо элемента необходимо дождаться загрузки этого элемента (страницы) (используйте window.load или расположите скрипт ниже необходимого элемента).

Использование метода window.getComputedStyle() с псевдоэлементами

Метод getComputedStyle() может получить информацию о стилях из псевдоэлемента (например, ::after , ::before , ::marker , ::line-marker и т.д.):

Управление встроенными стилями элемента

Самый простой способ управления стилями CSS с помощью JS — это манипулирование атрибутом style отдельных элементов документа (подробнее об атрибуте элемента и свойстве элемента). При этом свойство style объекта Element имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style.

Для нестандартных атрибутов DOM свойство узла как объекта DOM не создаётся.

h3 . style . fontWeight = «bold» ; // свойство, соответствующее атрибуту с дефисом, — через CamelCase

Свойства стиля объекта CSSStyleDeclaration имеют тип всех значений string .

Кроме того, во всех свойствах позиционирования должны быть указаны единицы измерения, например:

Особенности именования свойств объекта CSSStyleDeclaration:

1. Если имя CSS-атрибута содержит дефисы (например, font-size ), имя свойства объекта CSSStyleDeclaration образуется путем удаления дефисов и использования записи формата CamelCase (например, CSS-атрибут border-left-width доступен через свойство borderLeftWidth ).
2. Если CSS-свойство имеет имя, совпадающее с зарезервированным словом языка JavaScript (например, float ), к этому имени добавляется префикс «css». В результате получим свойство cssFloat объекта CSSStyleDeclaration.

Особенности использования свойств объекта CSSStyleDeclaration:

• Атрибут< style>HTML-элемента — это его встроенный стиль, который в целом удобно использовать для начальной установки значений стиля. Однако сценарии JS могут читать свойства объекта CSSStyleDeclaration, только если эти свойства были ранее установлены сценарием на языке JavaScript или если HTML-элемент имеет встроенный атрибут style , установивший нужные свойства, например:

console . log ( h3 . style . position ) ; // пустая строка, свойство не установлено сценарием JS или атрибутом style

Чтение встроенного стиля элемента представляет особую сложность, когда выполняется чтение свойств стиля, имеющих единицы измерения, а также свойств сокращенной формы записи (сценарий должен включать реализацию синтаксического анализа строк с CSS-стилями, чтобы обеспечить возможность извлечения и дальнейшего использования значений). Иногда бывает проще прочитать или записать единственную строку во встроенный стиль элемента, чем обращаться к объекту CSSStyleDeclaration . Для этого можно использовать методы getAttribute() и setAttribute() объекта Element или свойство cssText объекта CSSStyleDeclaration (подробнее. ).

Добавление элементам классов, атрибутов и CSS-стилей (их удаление и проверка наличия)

Как правило, существует два способа задания стилей для элемента:

1. cоздать класс в CSS и в HTML как и использовать его;
2. определять стили непосредственно в атрибуте style как .

JavaScript может менять и классы, и свойство style , однако определение и изменение классов – предпочтительный вариант по сравнению с изменением style .

Использование style является приемлемым, если мы вычисляем координаты элемента и хотим установить их из JavaScript, например:

Источник

Распространенные способы подключения CSS в JavaScript-приложения

Каждый способ подключения CSS в приложениях React, Vue или Angular имеет свои преимущества и недостатки . Рассмотрим каждый из них более подробно.

Доступные варианты подключения

Рассмотрим некоторые из наиболее часто используемых методов подключения CSS в JavaScript.

Вариант 1: таблица стилей

Мы начнем с привычного подхода – ссылка на один общий файл CSS.

Но по мере того, как приложение становится больше и сложнее, поддерживать единую таблицу стилей будет все труднее. Sass и PostCSS помогут справиться с подобными проблемами.

В зависимости от сложности приложения этот файл CCS будет загружаться асинхронно и блокировать рендеринг остальной части приложения. Поэтому данный метод для небольших приложений.

Тем не менее, общая таблица стилей обеспечивает четкое разделение между бизнес-логикой и стилями приложения. Кроме этого отдельный файл CSS легко кэшируется браузерами.

Вариант 2: Модули CSS

Стили с областями видимости позволяют программно генерировать имена классов, специфичные для конкретного компонента. Область действия CSS определяется конкретным компонентом. Это гарантирует, что имена используемых классов будут уникальными.

Подобная автоматизация приводит к появлению автоматически сгенерированных имен классов, таких как header__2lexd. Часть в конце имени — это хешированный селектор, который является уникальным.

Модули CSS предлагают различные способы управления сгенерированными именами классов. Более подробно об этом можно узнать из документации по модулям .

Представьте, что вы хотите использовать глобальный класс .screen-reader-text, который можно применить к любому компоненту приложения. При использовании CSS-модулей вам придется обратиться к псевдоселектору :global, который определяет размещенные внутри него стили как глобально доступные.

Пока вы импортируете файл CSS, который включает в себя блок объявления :global, в таблицу стилей компонента, вы будете использовать этот глобальный селектор.

Вот пример псевдоселектора :global в действии.

// typography.css :global < .aligncenter < text-align: center; >.alignright < text-align: right; >.alignleft < text-align: left; >>

А с помощью таких инструментов, как PostCSS Nested или Sass, вы можете импортировать шаблоны непосредственно в селектор.

Также обратите внимание на то, как мы ссылаемся на имена классов в узлах DOM. Нужно, чтобы имена отдельных документов для Vue , React и Angular говорили сами за себя. Вот небольшой пример того, как ссылки на классы используются в компоненте React.

// ./css/Button.css .btn < background-color: blanchedalmond; font-size: 1.4rem; padding: 1rem 2rem; text-transform: uppercase; transition: background-color ease 300ms, border-color ease 300ms; &:hover < background-color: #000; color: #fff; >> // ./Button.js import styles from "./css/Button.css"; const Button = () => ( > Click me! ); export default Button;

Модули CSS позволяют воспользоваться преимуществами стилей с заданной областью видимости без ущерба для производительности приложения.

Также модули CSS можно комбинировать с препроцессорами. Sass, Less, PostCSS могут быть интегрированы в процесс сборки с использованием модулей CSS.

Вариант 3: CSS in JS

Есть несколько пакетов, которые делают создание кода CSS-in-JS максимально безболезненным. JSS , Emotion и Styled Components — это лишь некоторые из них.

CSS-in-JS работает следующим образом. Вы пишете CSS-код, связанный с отдельным компонентом. Во время компиляции приложения используемая платформа выводит CSS-код только тех компонентов, которые постоянно отображаются на веб-странице.

Фреймворки CSS-in-JS выводят связанный CSS-код в теге раздела . Это позволяет оперативно загружать критический CSS. При этом стили имеют ограниченную область действия, а имена классов хэшируются.

При навигации пользователя по приложению стили невостребованных компонентов будут удалены из раздела . На их место будут добавлены стили входящих компонентов. Это повышает производительность приложения, позволяет обойтись без HTTP- запроса и не блокирует рендеринг. Также CSS-in-JS позволяет ссылаться на состояния компонентов и функции для рендеринга стилей CSS.

Основные аспекты использования данного подхода:

• Некоторые решения CSS-in-JS требуют, чтобы стили были встроены в элемент, который вы пытаетесь стилизовать. Для этого используется очень сложный синтаксис.
• CSS-in-JS предоставляет мощные инструменты, которые сложно реализовать с помощью модулей CSS или простой таблицы стилей.
• Нужно уметь использовать новейшие функции CSS, такие как вложенность и переменные.

Пример компонента React с использованием библиотеки Styled Components:

// ./Button.js import styled from 'styled-components'; const StyledButton= styled.button` background-color: blanchedalmond; font-size: 1.4rem; padding: 1rem 2rem; text-transform: uppercase; transition: background-color ease 300ms, border-color ease 300ms; &:hover < background-color: #000; color: #fff; >`; const Button = () => ( Click Me! ); export default Button;

Заключение

Есть несколько различных способов, позволяющих справиться с CSS-архитектурой в приложениях JavaScript. Но у каждого из них есть свои достоинства и свои недостатки.

Источник

How to set CSS styles using JavaScript

In my previous article, we looked at different ways to get style information from an HTML element using JavaScript. Today, you’ll learn how to apply CSS styles to HTML elements with JavaScript.

Let us say we have the following element:

div class="pizza">Hot, spicy, pizza 🍕div> 

Now, we want to change its text, background colors, and font style CSS properties using JavaScript. What should we do? There are multiple options available in JavaScript.

The easiest and straightforward way to change the CSS styles of an element with JavaScript is by using the DOM style property. All you need to do is fetch the element from DOM and change its inline styles:

const pizza = document.querySelector('.pizza') // change the text color to white pizza.style.color = 'white' // set background color to blue pizza.style.backgroundColor = 'blue' // change font style to italic pizza.style.fontStyle = 'italic' 

The style property uses the camel-case naming conventions for CSS properties and applies styles inline to the element:

div class="pizza" style="color: white; background-color: blue; font-style: italic;">Hot, spicy, pizza 🍕div> 

Another way is to create a

const style = document.createElement('style') 

Finally, append the style element to the DOM. To do this, get the tag using document.head , and then call the appendChild() method on it to append the style element:

document.head.appendChild(style) 

// create an element const style = document.createElement('style') // add CSS styles style.innerHTML = ` .pizza ` // append to DOM document.head.appendChild(style) 

The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify [the] CSS style dynamically.

The CSSStyleSheet.insertRule() method inserts a new CSS rule to a stylesheet. Here is how you can use this method to add styles to the above HTML element:

// create an new style const style = document.createElement('style') // append to DOM document.head.appendChild(style) // insert CSS Rule style.sheet.insertRule(` .pizza `) 

It is not really required to create a new element. You can use existing elements as well as external stylesheets to add CSS rules using insertRule() . The insertRule() method works in all modern browsers, including Internet Explorer 9 and higher.

Constructable Stylesheets is a modern way of creating and distributing reusable styles when working with the Shadow DOM. Here is an example that creates a Constructable Stylesheets and appends it to the Shadow DOM:

// create a new shared stylesheet const sheet = new CSSStyleSheet() // add CSS styles sheet.replaceSync(` .pizza `) // apply the stylesheet to a document document.adoptedStyleSheets = [sheet] 

In this article, we looked at four ways to add CSS styles to an HTML element in JavaScript. So, which method should you use? It depends on what you want to achieve by dynamically changing the CSS. If you only want to modify CSS styles for a single element, it is better to use the style property. This property changes the inline styles for a specific HTML element without affecting global styles. If you want to apply a style to a set of HTML elements, create a new tag with the necessary CSS properties and append it to the document. Read Next: How to add multiple CSS styles using JavaScript ✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like.

Источник