Стили и классы

До того, как начнёте изучать способы работы со стилями и классами в JavaScript, есть одно важное правило. Надеемся, это достаточно очевидно, но мы всё равно должны об этом упомянуть.

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

1. Создать класс в CSS и использовать его:
2. Писать стили непосредственно в атрибуте style : .

JavaScript может менять и классы, и свойство style .

Классы – всегда предпочтительный вариант по сравнению со style . Мы должны манипулировать свойством style только в том случае, если классы «не могут справиться».

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

let top = /* сложные расчёты */; let left = /* сложные расчёты */; elem.style.left = left; // например, '123px', значение вычисляется во время работы скрипта elem.style.top = top; // например, '456px'

Мы также можем установить сразу несколько стилей для элемента, используя свойство cssText . Но с ним нужно быть осторожнее, т.к оно может как добавить стили к существующим, так и полностью перезаписать их на новые:

let top = /* сложные расчёты */; let left = /* сложные расчёты */; // полная перезапись стилей elem, используем = elem.style.cssText = ` top: $; left: $; `; // добавление новых стилей к существующим стилям elem, используем += elem.style.cssText += ` top: $; left: $; `; // если элементу уже заданы стили, которые мы хотим добавить (+=), // они будут перезаписаны на новые.

В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и лёгкое в поддержке решение.

className и classList

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

Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа «class» не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство elem.class .

Поэтому для классов было введено схожее свойство «className» : elem.className соответствует атрибуту «class» .

Если мы присваиваем что-то elem.className , то это заменяет всю строку с классами. Иногда это то, что нам нужно, но часто мы хотим добавить/удалить один класс.

Для этого есть другое свойство: elem.classList .

elem.classList – это специальный объект с методами для добавления/удаления одного класса.

Так что мы можем работать как со строкой полного класса, используя className , так и с отдельными классами, используя classList . Выбираем тот вариант, который нам удобнее.

• elem.classList.add/remove(«class») – добавить/удалить класс.
• elem.classList.toggle(«class») – добавить класс, если его нет, иначе удалить.
• elem.classList.contains(«class») – проверка наличия класса, возвращает true/false .

Кроме того, classList является перебираемым, поэтому можно перечислить все классы при помощи for..of :

Свойство style

Свойство elem.style – это объект, который соответствует тому, что написано в атрибуте «style» .

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

background => elem.style.background top => elem.style.top opacity => elem.style.opacity

Для свойств из нескольких слов используется camelCase:

background-color => elem.style.backgroundColor z-index => elem.style.zIndex border-left-width => elem.style.borderLeftWidth

document.body.style.backgroundColor = prompt('background color?', 'green');

Свойства с префиксом

Стили с браузерным префиксом, например, -moz-border-radius , -webkit-border-radius преобразуются по тому же принципу: дефис означает заглавную букву.

button.style.MozBorderRadius = '5px'; button.style.WebkitBorderRadius = '5px';

Сброс стилей

Иногда нам нужно добавить свойство стиля, а потом, позже, убрать его.

Например, чтобы скрыть элемент, мы можем задать elem.style.display = «none» .

Затем мы можем удалить свойство style.display , чтобы вернуться к первоначальному состоянию. Вместо delete elem.style.display мы должны присвоить ему пустую строку: elem.style.display = «» .

// если мы запустим этот код, "мигнёт" document.body.style.display = "none"; // скрыть setTimeout(() => document.body.style.display = "", 1000); // возврат к нормальному состоянию

Если мы установим в style.display пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства style.display вообще не было.

Следите за единицами измерения

Не забудьте добавить к значениям единицы измерения.

Например, мы должны устанавливать 10px , а не просто 10 в свойство elem.style.top . Иначе это не сработает:

Пожалуйста, обратите внимание, браузер «распаковывает» свойство style.margin в последних строках и выводит style.marginLeft и style.marginTop из него.

Вычисленные стили: getComputedStyle

Итак, изменить стиль очень просто. Но как его прочитать?

Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать?

Свойство style оперирует только значением атрибута «style» , без учёта CSS-каскада.

Поэтому, используя elem.style , мы не можем прочитать ничего, что приходит из классов CSS.

Например, здесь style не может видеть отступы:

  body Красный текст  

…Но что, если нам нужно, скажем, увеличить отступ на 20px ? Для начала нужно его текущее значение получить.

Для этого есть метод: getComputedStyle .

getComputedStyle(element, [pseudo])

element Элемент, значения для которого нужно получить pseudo Указывается, если нужен стиль псевдоэлемента, например ::before . Пустая строка или отсутствие аргумента означают сам элемент.

Результат вызова – объект со стилями, похожий на elem.style , но с учётом всех CSS-классов.

  body   

Вычисленное (computed) и окончательное (resolved) значения

Есть две концепции в CSS:

1. Вычисленное (computed) значение – это то, которое получено после применения всех CSS-правил и CSS-наследования. Например, height:1em или font-size:125% .
2. Окончательное (resolved) значение – непосредственно применяемое к элементу. Значения 1em или 125% являются относительными. Браузер берёт вычисленное значение и делает все единицы измерения фиксированными и абсолютными, например, height:20px или font-size:16px . Для геометрических свойств разрешённые значения могут иметь плавающую точку, например, width:50.5px .

Давным-давно getComputedStyle был создан для получения вычисленных значений, но оказалось, что окончательные значения гораздо удобнее, и стандарт изменился.

Так что, в настоящее время getComputedStyle фактически возвращает окончательное значение свойства, для геометрии оно обычно в пикселях.

getComputedStyle требует полное свойство!

Для правильного получения значения нужно указать точное свойство. Например: paddingLeft , marginTop , borderTopWidth . При обращении к сокращённому: padding , margin , border – правильный результат не гарантируется.

Например, если есть свойства paddingLeft/paddingTop , то что мы получим вызывая getComputedStyle(elem).padding ? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет.

Стили, применяемые к посещённым :visited ссылкам, скрываются!

Посещённые ссылки могут быть окрашены с помощью псевдокласса :visited .

Но getComputedStyle не даёт доступ к этой информации, чтобы произвольная страница не могла определить, посещал ли пользователь ту или иную ссылку, проверив стили.

JavaScript не видит стили, применяемые с помощью :visited . Кроме того, в CSS есть ограничение, которое запрещает в целях безопасности применять к :visited CSS-стили, изменяющие геометрию элемента. Это гарантирует, что нет обходного пути для «злой» страницы проверить, была ли ссылка посещена и, следовательно, нарушить конфиденциальность.

Итого

Для управления классами существуют два DOM-свойства:

• className – строковое значение, удобно для управления всем набором классов.
• classList – объект с методами add/remove/toggle/contains , удобно для управления отдельными классами.

Чтобы изменить стили:

• Свойство style является объектом со стилями в формате camelCase. Чтение и запись в него работают так же, как изменение соответствующих свойств в атрибуте «style» . Чтобы узнать, как добавить в него important и делать некоторые другие редкие вещи – смотрите документацию.
• Свойство style.cssText соответствует всему атрибуту «style» , полной строке стилей.

Для чтения окончательных стилей (с учётом всех классов, после применения CSS и вычисления окончательных значений) используется:

• Метод getComputedStyle(elem, [pseudo]) возвращает объект, похожий по формату на style . Только для чтения.

Задачи

Создать уведомление

важность: 5

Напишите функцию showNotification(options) , которая создаёт уведомление: с заданным содержимым. Уведомление должно автоматически исчезнуть через 1,5 секунды.

Пример объекта options :

// показывает элемент с текстом "Hello" рядом с правой верхней частью окна. showNotification(< top: 10, // 10px от верхней границы окна (по умолчанию 0px) right: 10, // 10px от правого края окна (по умолчанию 0px) html: "Hello!", // HTML-уведомление className: "welcome" // дополнительный класс для div (необязательно) >);

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

Как изменить свойство класса с помощью js?

Есть div с классом mystyle . В классе есть свойство margin как его изменить с помощью обычного js или jquery?

.mystyle, .mystyle ul

Отслеживать
123k 24 24 золотых знака 128 128 серебряных знаков 307 307 бронзовых знаков
задан 28 фев 2017 в 6:12
403 3 3 золотых знака 14 14 серебряных знаков 47 47 бронзовых знаков
– user256824
6 ноя 2019 в 4:05

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

document.getElementsByClassName('mystyle')[0].style.margin = "50px"; 

document.getElementsByClassName('mystyle')[0].style= "margin: 50px"; 

$('.mystyle').css('margin','50px'); 

Отслеживать
ответ дан 28 фев 2017 в 6:23
69 7 7 бронзовых знаков

Если нужно поменять во всех элементах этого класса:

$('.mystyle').css('margin','10px') 

Если прямо в стилях нужно поменять:

$(function() < var ss = document.styleSheets[0]; var rules = ss.cssRules || ss.rules; var h1Rule = null; for (var i = 0; i < rules.length; i++) < var rule = rules[i]; if (/(^|,) *\.mystyle *(,|$)/i.test(rule.selectorText)) < h1Rule = rule; break; >> h1Rule.style.margin='10px' console.log(h1Rule.style.margin) >);

.mystyle

 
Header

Отслеживать
ответ дан 28 фев 2017 в 6:16
9,730 2 2 золотых знака 17 17 серебряных знаков 49 49 бронзовых знаков

function getClassByName(className)

.mystyle, .mystyle ul

Отслеживать
ответ дан 15 июн 2020 в 14:06
11 2 2 бронзовых знака

Невозможно переписывать CSS стиле с помощью JS. Лучше создай новый класс с нужными свойствами и добавляй его.

 .mystyle, .mystyle ul < margin: 0; >.mystyle.active < margin: 20px 0; >.mystyle.active ul

 document.querySelector('.mystyle').classList.add('active'); 

$('.mystyle').addClass('active'); 

Редактирование стилей для платформ CSS-in-JS

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

Копирование объявлений правил стилей для их вставки с помощью синтаксиса JavaScript

В области Стили можно скопировать объявления для правила стиля таким образом, чтобы он был отформатирован для JavaScript и готов к вставке в файл JavaScript.

При использовании библиотек CSS-in-JS можно скопировать объявления CSS (свойство и значение CSS), чтобы они автоматически форматировались для JavaScript. Вам не нужно вручную изменять скопированный CSS в соответствии с синтаксисом JavaScript. Вы можете скопировать одно объявление CSS или все объявления в правиле стиля, а затем вставить их непосредственно в файл JavaScript без проблем с синтаксисом.

Чтобы скопировать правило стиля как JavaScript, выполните следующие действия:

1. В DevTools откройте инструмент Элементы и перейдите на вкладку Стили .
2. Щелкните правой кнопкой мыши объявление в правиле стиля и выберите Копировать объявление как JS или Копировать все объявления как JS.
3. Вставьте скопированный CSS-файл в файл JavaScript в текстовом редакторе, например Visual Studio Code. Пример: ‘—more-link’: ‘lime’ .

Дополнительные сведения о просмотре и изменении CSS см. в справочнике по функциям CSS.

Изменение правил стиля, изначально определенных функцией CSSOM

Панель «Стили» поддерживает редактирование стилей, созданных с помощью API-интерфейсов CSS Object Model (CSSOM). Многие платформы и библиотеки CSS-in-JS используют API объектной модели CSS для создания стилей.

Вы можете изменять стили, добавленные в JavaScript, с помощью CSSStyleSheet интерфейса , который является способом создания и распространения повторно используемых стилей при использовании Теневой модели DOM. См. раздел Интерфейс CSSStyleSheet в объектной модели CSS (CSSOM).

Пример

В этом примере кода правила стиля сначала определяются путем вызова функции CSS Object Model (CSSOM), а затем правила стиля редактируются с помощью области Стили . Объект CSSStyleSheet содержит API CSSOM, например insertRule() . Стили h1 , которые были изначально добавлены CSSStyleSheet функцией, затем можно редактировать в области Стили .

//Add CSS-in-JS button function addStyle() < const sheet = new CSSStyleSheet(); sheet.insertRule(`h1 < background: pink; text-transform: uppercase; >`); document.adoptedStyleSheets = [sheet]; > 

В этом примере показано изменение background свойства стилей h1 , добавленных функцией insertRule() объектной модели CSS . Цвет background сначала задается путем вызова функции объектной модели CSS, а затем его можно изменить с pink lightblue на с помощью области Стили .

Что такое CSS-in-JS?

Этот раздел является фрагментом из записи блога о поддержке CSS-in-JS в DevTools.

Вот что мы имеем в виду под CSS-in-JS и чем он отличается от обычного CSS. Определение CSS-in-JS несколько расплывчато. В широком смысле это подход к управлению кодом CSS с помощью JavaScript. Например, это может означать, что содержимое CSS определяется с помощью JavaScript, а конечные выходные данные CSS создаются приложением на лету.

В контексте средств разработки CSS-in-JS означает, что содержимое CSS внедряется на страницу с помощью API объектной модели CSS. Обычный CSS внедряется с помощью элементов или и имеет статический источник (например, узел DOM или сетевой ресурс). Напротив, CSS-in-JS часто не имеет статического источника.

Особый случай здесь заключается в том, что содержимое элемента может быть обновлено с помощью API объектной модели CSS, что приводит к тому, что источник перестает синхронизироваться с фактической таблицей стилей CSS.

Если вы используете любую библиотеку CSS-in-JS (например, styled-component, Emotion или JSS), библиотека может внедрять стили с помощью API объектной модели CSS в зависимости от режима разработки и браузера.

Давайте рассмотрим некоторые примеры того, как можно внедрить таблицу стилей с помощью API объектной модели CSS, аналогичному подходу, используемому некоторыми библиотеками CSS-in-JS.

// Insert new rule to an existing CSS stylesheet const element = document.querySelector('style'); const stylesheet = element.sheet; stylesheet.replaceSync('.some < color: blue; >'); stylesheet.insertRule('.some < color: green; >'); 

Вы также можете создать совершенно новую таблицу стилей:

// Create a completely new stylesheet const sheet = new CSSStyleSheet(); stylesheet.replaceSync('.some < color: blue; >'); stylesheet.insertRule('.some < color: green; >'); 

// Apply constructed stylesheet to the document document.adoptedStyleSheets = [. document.adoptedStyleSheets, sheet]; 

Поддержка CSS в средствах разработки

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

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

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Оригинальная страница находится здесь и автор Алекс Руденко (Технический писатель, Chrome DevTools & Lighthouse).

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.

DOM — Изменение CSS

HTML DOM позволяет JavaScript изменять стиль HTML элементов.

document.getElementById(id).style.свойство = новый стиль

В следующем примере изменяется стиль элемента :

   
Hello World!
    

Использование событий

HTML DOM позволяет выполнять код при возникновении какого-либо события.

События генерируются браузером, когда с HTML элементом «что-то происходит»:

• на элемент кликнули мышкой
• страница полностью загрузилась
• поле ввода было изменено

Подробнее о событиях вы узнаете в следующей главе этого учебника.

В следующем примере изменяется стиль HTML элемента с id=»id1″, когда пользователь нажимает на кнопку:

    
Заголовок 1
 Нажми меня!