Element.classlist - интерфейсы веб api

Фреймворки и библиотеки JavaScript

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

Несмотря на то, что некоторые люди считают излишним добавлять среду ~ 50 КБ для простого изменения класса, если вы выполняете какой-либо значительный объем работы с JavaScript или что-либо, что может иметь необычное поведение в разных браузерах, это стоит рассмотреть.

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

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

(обратите внимание, что здесь является объектом jQuery.)

Изменение классов с помощью jQuery:

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

Изменение атрибутов

Атрибуты — это значения, которые содержат дополнительную информацию об элементах HTML. Обычно они идут в паре название/значение и могут быть обязательными в зависимости от элемента.

Среди самых распространенных атрибутов HTML необходимо отметить атрибут тега , для тега , , и . Полный список атрибутов HTML см. в списке атрибутов в Mozilla Developer Network. Пользовательские элементы, которые не являются частью стандарта HTML, будут сопровождаться префиксом .

В JavaScript есть четыре метода для изменения атрибутов элементов:

Метод	Описание	Пример
	Возвращает или
	Возвращает значение определенного атрибута или
	Добавляет или обновляет заданный атрибут
	Удаляет атрибут элемента

Давайте создадим новый файл HTML с тегом с одним атрибутом. Мы привяжем открытое изображение через URL, но вы можете использовать другое локальное изображение, если вы работаете оффлайн.

attributes.html

При загрузке указанного выше файла HTML в современном веб-браузере и открытии консоли разработчика, вы должны получить примерно следующий вывод:

Теперь мы можем протестировать все методы атрибутов на ходу.

К этому моменту вы удалите атрибут и значение, связанное с тегом , но вы можете сбросить этот атрибут и присвоить значение другому изображению с помощью :

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

Любой атрибут можно изменить таким образом, а также с помощью описанных выше методов.

Методы и обычно используются с условными операторами, а методы и используются для прямого изменения DOM.

Назначение этих действий событиям onclick:

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

Первым шагом к достижению этого является создание функции и вызов функции в атрибуте onclick, например:

_{(Необязательно иметь этот код в тегах скрипта, это просто для краткости примера, и включение JavaScript в отдельный файл может быть более подходящим.)}

Второй шаг — переместить событие onclick из HTML в JavaScript, например, с помощью addEventListener

(Обратите внимание, что часть window.onload требуется, чтобы содержимое этой функции выполнялось после HTML завершил загрузку — без этого MyElement может не существовать при вызове кода JavaScript, поэтому эта строка завершится ошибкой.)

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

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

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

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

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

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

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

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

Синтаксис:

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

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

Например:

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

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

Вычисленное (computed) значение – это то, которое получено после применения всех CSS-правил и CSS-наследования. Например, или .
Окончательное () значение – непосредственно применяемое к элементу. Значения или являются относительными. Браузер берёт вычисленное значение и делает все единицы измерения фиксированными и абсолютными, например, или . Для геометрических свойств разрешённые значения могут иметь плавающую точку, например, .

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

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

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

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

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

Есть и другие несоответствия. Например, некоторые браузеры (Chrome) отображают в документе ниже, а некоторые (Firefox) – нет:

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

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

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

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

Фреймворки и библиотеки JavaScript

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

Хотя некоторые люди считают излишним добавлять фреймворк размером ~ 50 КБ для простого изменения класса, если вы выполняете какой-либо существенный объем работы с JavaScript или что-то, что может иметь необычное кроссбраузерное поведение, это стоит рассмотреть.

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

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

(Обратите внимание, что вот объект jQuery.)

Простое решение

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

Для изменения всех классов для элемента:

Для замены всех существующих классов одним или несколькими новыми классами установите атрибут имени класса:

(Можно использовать разделенный пробелами список для применения нескольких классов.)

Для добавления дополнительного класса к элементу:

Для добавления класса к элементу, не удаляя/влияя существующие значения, добавляют пространство и новое имя класса, как так:

Для удаления класса из элемента:

Для удаления единого класса к элементу, не влияя на другие потенциальные классы, простая замена regex требуется:

объяснение этого regex следующие:

Эти флаг говорит замене повторяться как требуется, в случае, если имя класса было добавлено многократно.

, Чтобы проверить, применяется ли класс уже к элементу:

тот же regex, используемый выше для удаления класса, может также использоваться в качестве проверки относительно того, существует ли конкретный класс:

Присвоение этих действий к onclick событиям:

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

первый шаг к достижению этого путем создания функции и вызывания функции в атрибуте onclick, например:

_{(Это не требуется, чтобы иметь этот код в тегах script, это просто для краткости примера, и включая JavaScript в отличном файле может быть более соответствующим.)}

второй шаг должен переместить onclick событие из HTML и в JavaScript, например, с помощью addEventListener

(Обратите внимание, что window.onload часть требуется так, чтобы содержание той функции было выполнено после , HTML закончил загружаться — без этого, MyElement не мог бы существовать, когда код JavaScript называют, так, чтобы строка перестала бы работать.)

Нестандартные атрибуты

У каждого элемента есть некоторый набор стандартных свойств, например для это будут , , а для это будут , , и так далее.

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

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

Например:

Свойство является стандартным, только если оно описано в стандарте именно для этого элемента.

То есть, если назначить элементу атрибут , то свойство от этого не появится. Как, впрочем, и если назначить ссылке атрибут :

Нестандартные атрибуты иногда используют для CSS.

В примере ниже для показа «состояния заказа» используется атрибут :

Почему именно атрибут? Разве нельзя было сделать классы , , ?

Конечно можно, но манипулировать атрибутом из JavaScript гораздо проще.

Например, если нужно отменить заказ, неважно в каком он состоянии сейчас – это сделает код:

Для классов – нужно знать, какой класс у заказа сейчас. И тогда мы можем снять старый класс, и поставить новый:

…То есть, требуется больше исходной информации и надо написать больше букв. Это менее удобно.

Проще говоря, значение атрибута – произвольная строка, значение класса – это «есть» или «нет», поэтому естественно, что атрибуты «мощнее» и бывают удобнее классов как в JS так и в CSS.

Пример:

Да, есть много способов сделать это. В синтаксисе ES6 этого легко добиться. Используйте этот код, чтобы добавить и удалить класс.

используя принятый ответ выше, это простая кросс-браузерная функция для добавления и удаления класса

добавить класс:

удалить класс:

Много ответов, много хороших ответов.

ИЛИ

Вот и все.

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

Заметка: Это возможно с (документ или событие):

Есть недвижимость className в javascript, чтобы изменить имя класса элемента HTML. Существующее значение класса будет заменено новым, которое вы присвоили в className.

Кредит — https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html

Вопрос OP был Как я могу изменить класс элемента с помощью JavaScript?

Современные браузеры позволяют это делать с одной строкой javascript:

В Атрибут предоставляет DOMTokenList, у которого есть множество методов. Вы можете работать со списком классов элемента, используя простые манипуляции, такие как Добавить(), удалять() или заменить (). Или станьте очень изощренным и управляйте классами, как если бы вы делали объект или карту с ключи (), ценности(), записи ()

Ответ Питера Боутона отличный, но ему уже больше десяти лет. Все современные браузеры теперь поддерживают DOMTokenList — см. Https://caniuse.com/#search=classList, и даже IE11 поддерживает некоторые методы DOMTokenList.

пытаться

Рабочий код JavaScript:

Вы можете скачать рабочий код по этой ссылке.

1 Это приведет к разрыву элементов с более чем одним классом.

Вот простой код jQuery для этого.

Вот,

Class1 — это слушатель события.
Родительский класс — это класс, в котором размещается класс, который вы хотите изменить.
Classtoremove — это ваш старый класс.
Добавляемый класс — это новый класс, который вы хотите добавить.
100 — время ожидания, в течение которого изменяется класс.

Удачи.

Tweet
Share
Link
Plus
Send
Send
Pin

Указатель методов в JavaScript на телугу | Методы в JavaScript | VLR тренировочный класс 23

https://youtube.com/watch?v=AoILvZw-mww

Как я могу изменить класс элемента HTML в ответ на или любые другие события с использованием JavaScript?

29 «Атрибут class в основном используется для указания класса в таблице стилей. Однако он также может использоваться JavaScript (через HTML DOM) для внесения изменений в элементы HTML с указанным классом». -w3schools.com/tags/att_standard_class.asp
11 Заменить с участием . Заменить с любым именем, которое вы дали классу, заключенным в кавычки. Это избавляет от необходимости удалять текущий класс и добавлять другой. Этот пример jsFiddle показывает полный рабочий код.
3 Для изменения класса HTML-элемента с помощью onClick используйте этот код: и в разделе javascript: } В сети
@Triynko — эта ссылка на w3schools изменилась, похоже, в сентябре 2012 года. Вот эта страница на Archive.org от 12 сентября 2012 года: HTML class Attribute-w3schools. Вот ссылка на заменяющую страницу на w3schools.com: HTML class Attribute-w3schools.

Стили элемента

В DOM у каждого элемента есть свойство , с помощью которого мы можем управлять его стилями. Значение данного свойства — это объект, который доступен только для чтения. Установка стилей элементу в этом случае осуществляется посредством добавления к нему соответствующих свойств.

Пример, как можно к элементу добавить стили через DOM-свойство :

<div class="square">Квадрат</div>

<script>
const square = document.querySelector('.square');
square.style.width = '170px';
square.style.height = '170px';
square.style.backgroundColor = 'green';
</script>

Имена свойств объекта обычно совпадают с названиями CSS-свойств. Исключение составляют только те CSS-свойства, в которых используется дефис. Например, . В этом случае дефис и следующая за ним буква заменяется на прописную. Например, CSS-свойство для объекта будет указывать как . А, например, CSS-свойство с браузерным префиксом — как .

Удаление стилей

Например, установим некоторый цвет фона:

document.body.style.backgroundColor = '#eee';

Если теперь данный стиль нужно убрать, то чтобы это выполнить мы должны просто присвоить ему пустую строку:

document.body.style.backgroundColor = '';

Примеры использования DOM-свойства style для установки стилей элементам.

<p id="introtext" style="font-weigth: bold;">...</p>
<p>...</p>
<p>...</p>

<script>
// установим элементу с id = "introtext" с использованием style красный цвет текста 
document.querySelector('#introtext').style.color = 'red';

// установим всем элементам p на странице с использованием style зелёный цвет текста
var paragraphs = document.querySelectorAll("p");
for (var i = 0, length = paragraphs.length; i < length; i++) { 
  paragraphs.style.backgroundColor = 'green';
}

// выведем в консоль все CSS свойства элемента с идентификатором "introtext"
var styleElem = document.querySelector('#introtext').style;
for (var i = 0, length = styleElem.length; i < length; i++) { 
  console.log(styleElem);
}
</script>

Свойство cssText

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

Пример, в котором установим стили элементам с классом :

Простое кросс-браузерное решение

Стандартный способ выбора элемента в JavaScript — это использование , и это то, что используют следующие примеры — вы, конечно, можете получить элементы другими способами, а в правильной ситуации можете просто использовать —- +: = 2 =: + —- — однако подробное описание этого выходит за рамки ответа.

Чтобы изменить все классы для элемента:

Чтобы заменить все существующие классы одним или несколькими новыми классами, установите атрибут className:

(Вы можете использовать разделенный пробелами список для применения нескольких классов.)

Чтобы добавить дополнительный класс к элементу:

Чтобы добавить класс к элементу, не удаляя /не затрагивая существующие значения, добавьте пробел и новое имя класса, например, так:

Чтобы удалить класс из элемента:

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

Объяснение этого регулярного выражения следующее:

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

Чтобы проверить, применяется ли класс к элементу:

То же регулярное выражение, которое использовалось выше для удаления класса, также можно использовать для проверки того, существует ли определенный класс:

Назначение этих действий событиям щелчка:

Хотя можно писать JavaScript непосредственно внутри атрибутов событий HTML (таких как ), это не рекомендуемое поведение. Особенно в более крупных приложениях более понятный код достигается путем отделения разметки HTML от логики взаимодействия JavaScript.

Первый шаг к достижению этого — создание функции и вызов функции в атрибуте onclick, например:

_{(Необязательно указывать этот код в тегах скрипта, это просто для краткости примера, и более подходящим может быть включение JavaScript в отдельный файл.) к югу>}

Второй шаг — переместить событие onclick из HTML в JavaScript, например, с помощью addEventListener

(Обратите внимание, что часть window.onload необходима для того, чтобы содержимое этой функции выполнялось после , когда HTML завершил загрузку — без этого MyElement может не существовать, когда вызывается код JavaScript , так что эта строка потерпит неудачу.)

Простое кросс-браузерное решение

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

Чтобы изменить все классы для элемента:

Чтобы заменить все существующие классы одним или несколькими новыми классами, установите атрибут className:

(Вы можете использовать разделенный пробелами список для применения нескольких классов.)

Чтобы добавить дополнительный класс к элементу:

Чтобы добавить класс к элементу, не удаляя/не затрагивая существующие значения, добавьте пробел и новое имя класса, например, так:

Чтобы удалить класс из элемента:

Объяснение этого регулярного выражения следующее:

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

Чтобы проверить, применяется ли класс к элементу:

Тот же самый regex, использованный выше для удаления класса, может также использоваться как проверка того, существует ли определенный класс:

Назначение этих действий событиям onclick:

Хотя можно писать JavaScript непосредственно внутри атрибутов событий HTML (таких как ), это не рекомендуемое поведение. Особенно в больших приложениях, более поддерживаемый код достигается путем отделения разметки HTML от логики взаимодействия JavaScript.

Первым шагом к достижению этого является создание функции и вызов функции в атрибуте onclick, например:

_{(Не обязательно иметь этот код в тегах скрипта, это просто для краткости примера, и включение JavaScript в отдельный файл может быть более подходящим.)}

Второй шаг — переместить событие onclick из HTML в JavaScript, например, используя addEventListener

(Обратите внимание, что часть window.onload необходима для того, чтобы содержимое этой функции выполнялось после, когда HTML завершил загрузку — без этого MyElement может не существовать при вызове кода JavaScript, поэтому эта строка потерпит неудачу.)

Фреймворки и библиотеки JavaScript

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

Хотя некоторые люди считают излишним добавлять ~ 50 КБ фреймворка для простого изменения класса, если вы выполняете какой-либо значительный объем работы с JavaScript или что-то, что может иметь необычное поведение в разных браузерах, это стоит рассмотреть.

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

(Обратите внимание, что здесь является объектом jQuery.)

Изменение классов с помощью jQuery:

Кроме того, jQuery предоставляет ярлык для добавления класса, если он не применяется, или удаления класса, который делает:

Несколько полезных советов для быстрой верстки

Анализируйте макет до начала работы

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

Научитесь быстро печатать

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

Выберите и настройте среду разработки

Писать HTML-код можно в любом редакторе кода, даже в «Блокноте», но это долго и неэффективно. Верстальщик может установить IDE (интегрированную единую среду разработки, которая используется разработчиками для создания проекта). От «Блокнота» она отличается массой возможностей: наличием встроенного проводника, подсветкой синтаксиса, управлением форматированием кода, возможностью работы с Git (инструментом, позволяющим фиксировать изменения в коде) и пр.

Используйте популярные плагины в редакторе кода

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

AutoFileName — поможет быстро найти файлы в папке проекта прямо при добавлении пути в атрибут src.

eCSStractor — с помощью него можно выделить участок HTML-кода с написанными классами и вставить в CSS-код готовые селекторы. В результате вам больше не придется писать в CSS селекторы — только нужные свойства.

Используйте методологию Яндекса БЭМ — блок-элемент-модификатор

С помощью нее можно создавать расширяемые и повторно используемые компоненты интерфейса. В результате вам больше не потребуется тратить время на придумывание названий классов или того, как элементы будут зависеть друг от друга.

Используйте препроцессор — надстройку над привычными языками (CSS и пр.)

Препроцессор Sass помогает в организации кода, избавляет от написания селектора каждый раз с новой строки, позволяет сократить код и вынести одинаковые реализации.

Используйте сборщики проекта

Они выполнят то, что разработчику не хочется делать руками и что отнимает много времени. Например, Gulp позволяет:

· автоматически обновлять страницу браузера при сохранении кода;

· расставлять префиксы для поддержки разных браузеров;

· автоматически собирать все файлы в один;

· создавать SVG-спрайты.

classList

У каждого элемента есть свойство classList, которое содержит в себе атрибуты HTML style class. Это свойство включает в себя методы, позволяющие добавлять или удалять классы:

function toggleColor() {

 var myButtonClasses = document.getElementById("btn1").classList;

 if (myButtonClasses.contains("blue")) {
    myButtonClasses.remove("blue");

 } else {
    myButtonClasses.add("blue");
 }

 if (myButtonClasses.contains("red")) {
    myButtonClasses.remove("red");
 } else {
    myButtonClasses.add("red");
 }
}

Посмотреть пример

В приведенном выше примере используется три метода classList.

contains() – возвращает значение true, если у элемента имеется родительский класс. Если же его нет, то возвращается значение false;
add() – добавляет заданный класс к элементу. Это действие игнорируется, если элемент уже содержит заданный класс;
Remove() — заданный класс, при его наличии, удаляется.

Эту задачу можно решить проще при помощи метода toggle(), который добавляет указанный атрибут class в HTML при его отсутствии, или удаляет его, если он уже применен:

function toggleColor() {
 document.getElementById("btn1").classList.toggle("blue");
document.getElementById("btn1").classList.toggle("red");

}

Посмотреть пример

При работе с несколькими классами их можно разделять запятыми:

document.getElementById("btn1").classList.toggle("blue”,  “bold");
document.getElementById("btn1").classList.toggle("red”,  “italics");

Единственный недостаток данного подхода заключается в том, что он был представлен лишь в HTML5, и не факт, что он будет хорошо поддерживаться устаревшими браузерами.

JQuery

jQuery предлагает методы, которые работают по тому же принципу. Но также позволяют использовать укороченные свойства для выделения элементов. Давайте посмотрим, как функция toggleColor() должна быть написана на jQuery:

function toggleColor() {

 $("#btn1").toggleClass("blue");
 $("#btn1").toggleClass("red");

}

Посмотреть пример

Можно использовать addClass(), removeClass() и hasClass() для toggleColor()

Обратите внимание, что новые HTML style class можно перечислять через пробел в той же строке

Пример:

$("#btn1").toggleClass("blue bold");
$("#btn1").toggleClass("red italics");

На этом все! Теперь вы знаете, как без труда изменять внешний вид DOM-элементов!

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

Пожалуйста, оставляйте ваши отзывы по текущей теме материала. За комментарии, лайки, дизлайки, отклики, подписки низкий вам поклон!

Валентин Сейидовавтор-переводчик статьи «How to Add/Remove CSS classes using JavaScript»

Итого

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

– строковое значение, удобно для управления всем набором классов.
– объект с методами , удобно для управления отдельными классами.

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

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

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

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