Изменить класс элемента javascript: Стили и классы

Leave a Comment / Разное / By /

Содержание

Как добавить класс в html через js

Как сделать — Добавить класс

Узнайте, как добавить имя класса к элементу с помощью JavaScript.

Добавить класс

Шаг 1) добавить HTML:

Добавьте имя класса в элемент div с идентификатором = «myDIV» (в этом примере мы используем кнопку для добавления класса).

Пример

<div > This is a DIV element.
</div>

Шаг 2) добавить CSS:

Стиль указанное имя класса:

Пример
Шаг 3) добавить JavaScript:

Получите элемент <div> с идентификатором = «myDIV» и добавьте в него класс «myStyle»:

Пример

Кросс-браузерное решение

Примечание: Свойство класслист не поддерживается в обозревателе Internet Explorer 9. Следующий код будет работать во всех браузерах:

Пример

Совет: Также посмотрите, как переключить класс.

Совет: Также Узнайте, как удалить класс.

Совет: Узнайте больше о свойстве класслист в нашей ссылке на JavaScript.

Совет: Узнайте больше о свойстве класса в нашей сппавка на JavaScript.

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

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

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

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

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

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

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

В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в 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 :

Element style

Свойство elem.style – это объект, который соответствует тому, что написано в атрибуте «style» . Установка стиля elem.style.width=»100px» работает так же, как наличие в атрибуте style строки width:100px .

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

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

Сброс стилей

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

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

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

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

Обычно мы используем style.* для присвоения индивидуальных свойств стиля. Нельзя установить список стилей как, например, div.style=»color: red; width: 100px» , потому что div.style – это объект, и он доступен только для чтения.

Для задания нескольких стилей в одной строке используется специальное свойство style.cssText :

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

То же самое можно сделать установкой атрибута: div.setAttribute(‘style’, ‘color: red. ‘) .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Посещённые ссылки могут быть окрашены с помощью псевдокласса :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 . Только для чтения.

Задачи

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

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

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

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

Добавление и удаление классов на jQuery

Статья, в которой разберем методы jQuery для управления классами элементов. Рассмотрим это как c использованием универсальных методов ( attr() , removeAttr() , prop() ), так и методов специально предназначенных для этого: addClass , hasClass() , removeClass() , toggleClass() .

Что такое классы HTML-элементов?

Класс – это некоторый признак, который можно добавить к элементам, а затем использовать его в CSS (для добавления к ним стилей) или JavaScript.

В HTML-коде установка класса элементу осуществляется через атрибут class .

Пример, в котором установим HTML-элементу <div> класс container :

При этом к элементу можно добавить не только один, но и несколько классов. Для установки нескольких классов их необходимо отделить друг от друга с помощью пробела.

Пример, в котором установим <a> три класса: btn , btn-red и btn-large :

Имя класса всегда должно начинаться с буквы A-Z или a-z. В качестве символов в имени класса разрешается использовать буквы A-Z или a-z, цифры (0-9), дефис («-«) и подчеркивание («_»).

Кроме этого, при указании класса обращайте внимание на то, что он является регистрозависимым. Т.е., например, класс Alert это не одно и тоже что alert .

Классы – это один из самых частых способов выбора элементов на странице. Они очень часто используются как в CSS, так и в JavaScript.

Пример использования классов:

Работа с классами через атрибут class

В jQuery выполнить операции над классами элементов можно с помощью методов attr и removeAttr. Данные методы предназначены для работы с любыми атрибутами, а не только с class .

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

Пример работы с атрибутом class :

Работа с классами через DOM-свойство className

Другой вариант – это работать с классами элемента не через атрибут class , а через DOM-свойство className . Этот вариант более предпочтительный чем вариант работы с классами через атрибут class . Но он также, как и предыдущий инструмент позволяет оперировать с ними, только как с целой строкой. Более подробно почитать про атрибуты и DOM-свойства можно в этой статье.

Если кратко, то сначала нужно разобраться что такое DOM.

DOM – это фундаментальная сущность, которую браузер создаёт после получения HTML кода запрашиваемой страницы и её парсинга. DOM – это объектная модель HTML страницы и API для работы с ней через JavaScript. Это означает то, что с помощью JavaScript сценариев вы можете изменять DOM «на лету» и тем самым страницу. Но DOM браузер создаёт не только для взаимодействия с ней через JavaScript. Он её, например, также использует для создания других структур, которые используются для отрисовки страницы во вкладке браузера.

При создании браузером DOM, HTML-теги становятся объектами, а HTML-атрибуты – свойствами этих объектов. Обычно имена атрибутов и соответствующих им DOM-свойств совпадают. Но, например, атрибут class и соответствующее ему DOM-свойство className нет. Связано с тем, что раньше ключевые слова нельзя было использовать в качестве названия DOM-свойств. Из-за этого было выбрано в качестве названия className . В последствии, когда это ограничение убрали имя DOM-свойству не стали изменять и сейчас она имеет тоже самое название.

В jQuery для работы с DOM-свойствами используется метод prop.

Рассмотрим применения данного метода для управления классами элемента.

Работа с классами через специальные методы

В jQuery имеются специальные методы, предназначенные именно для работы с классами. Всего их четыре. Это addClass , hasClass , removeClass и toggleClass .

Эти методы очень нужны, когда вам нужно выполнить детальную работу с классами, например, добавить один класс к элементу или его удалить.

Метод addClass

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

К сведению, если у элемента уже есть класс, который вы хотите добавить, то в этом случае он добавлен не будет.

Синтаксис метода addClass :

Например, добавим класс при клике на элемент:

Пример, в котором добавим несколько классов ко всем элементам .btn на странице:

Пример, в котором добавим ко всем элементам li , расположенных в #browsers , класс browser-item , но за исключением тех, у которых уже есть какой-то класс:

Метод hasClass

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

Если указанный класс есть у элемента, то метод hasClass возвращает true . В противном случае он возвращает false .

При применении его к набору элементов, он проверяет наличие указанного класса у всех них. И если указанный класс есть хотя бы у одного элемента этого набора данный метод возвращает true . В противном случае, он возвращает false .

Синтаксис метода hasClass :

Пример, в котором проверим наличие класса meow у элемента #say :

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

Метод removeClass

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

Синтаксис метода removeClass :

Если при вызове метода removeClass ничего ей не передать в качестве аргумента, то она удалит все классы у каждого элемента текущего набора.

Например, удалим класс text-center у всех элементов p :

Например, уберём сразу несколько классов у элементов div :

Например, удалим все классы у элементов . message , контент у которых равен пустой строке:

Метод toggleClass

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

Синтаксис метода toggleClass :

Пример, в котором переключим класс alert-warning у элементов .alert :

Данный код без использования метода toggleClass можно записать так:

Кроме этого, метод toggleClass может вести себя как addClass или removeClass . Это состояние можно установить посредством задания параметру state соответственно значения true или false .

Т.е. если параметру state установить true , то метод toggleClass будет только добавлять указанный класс к элементу, если у него его нет. И наоборот, если параметру state задать false , то метод toggleClass будет только удалять указанный класс, т.е. он будет вести себя как removeClass .

Пример, в котором добавим класс text-right только к тем элементам p на странице, у которых его нет:

Пример, в котором удалим класс text-center только у тех элементов div , у которых он есть:

Пример, в котором переключим класс text-lead с помощью функции. Выполним это для элементов .text , у которых размер шрифта равен 24px:

Работа с классами и стилями фреймворка Vue.js

Очень часто необходимо динамически изменять CSS-классы и стили элементов в зависимости от состояния приложения. Так как это — атрибуты, можно использовать v-bind, однако это не удобно и может приводить к ошибкам.
В Vue специально для работы с классами и стилями есть дополнительные возможности директивы v-bind. Эти атрибуты при динамической связывании могут принимать строки, массивы, объекты.

Связывание CSS-классов

Использование объектов

Для динамического задания или удаления CSS классов можно передать в директиву v-bind:class объект:


<div v-bind:class="{ active: isActive }"></div>

Запись выше обозначает, что наличие класса active будет определяться если параметр isActive является true.

Также, v-bind:class можно использовать и совместно с обычным атрибутом class:


<div
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

При использовании этих данных:


data: {
  isActive: true,
  hasError: false
}

Получится:


<div></div>

При изменении isActive или hasError, список классов элемента тоже обновится.
Используемый при связывании объект не обязательно должен быть указан прямо в шаблоне:


<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

Результат будет такой же. Еще можно использовать и вычисляемые свойства, возвращающие объекты.


<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.
  isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

Использование массивов

В v-bind:class можно передать массив:


<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

В результате получим:


<div></div>

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


<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

В этом случае errorClass будет применён к элементу всегда, а activeClass — только когда isActive является true.
Но такая конструкция становится немного громоздкой, если есть несколько классов. Поэтому можно использовать смешанный синтаксис:


<div v-bind:class="[{ active: isActive }, errorClass]"></div>

Использование с компонентами

При применении атрибута class к пользовательскому компоненту, классы будут добавлены к его корневому элементу. Собственные классы элемента потеряны не будут.


Vue.component('my-component', {
  template: '<p>Hi</p>'
})

Если указать дополнительные классы:


<my-component></my-component>

В результате рендеринга будет:


<p>Hi</p>

Такое делается и для связывания классов с данными:


<my-component v-bind:class="{ active: isActive }"></my-component>

Если isActive истинно, HTML будет:


<p>Hi</p>

Связывание inline-стилей

Использование объектов

Объектная запись для v-bind:style проста и выглядит почти как CSS,  но на самом деле, это объект JavaScript. Для указания свойств CSS можно применять как camelCase, так и kebab-case:


<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

Передача объекта стилей по имени может сделать код чище:


<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Можно также использовать и вычисляемые свойства, возвращающие объекты стилей.

Использование массивов

Запись v-bind:style с массивом позволяет применить несколько объектов стилей к одному и тому же элементу:


<div v-bind:style="[baseStyles, overridingStyles]"></div>

Автоматические префиксы

При использовании в v-bind:style свойств CSS, которые требуют указания вендорных префиксов, Vue автоматически определит это и добавит префиксы к стилям.

Множественные значения

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


<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Это отобразит последнее значение в массиве.

Работа с классами и стилями

Часто возникает необходимость динамически изменять CSS-классы и inline-стили элементов в зависимости от состояния приложения. Поскольку и то и другое атрибуты, мы можем использовать v-bind: необходимо лишь вычислить итоговую строку при помощи выражения. Впрочем, заниматься конкатенацией строк неудобно, это может привести к ошибкам. К счастью, Vue предоставляет дополнительные возможности директивы v-bind для работы с class и style. Эти атрибуты кроме строковых значений могут принимать массивы или объекты.

Связывание CSS-классов

Объектный синтаксис

Для динамической установки или удаления CSS-классов можно передавать объект в директиву :class (сокращение для v-bind:class):

<div :class="{ active: isActive }"></div>

1

Запись выше означает, что наличие класса

active будет определяться истинностью (opens new window) параметра isActive.

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

<div
 
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

1
2
3
4

При использовании таких данных:

data: {
  isActive: true,
  hasError: false
}

1
2
3
4

В результате получится:

<div></div>

1

Список классов элемента обновится при изменении isActive или hasError. Например, если hasError станет true, то значением атрибута class будет "static active text-danger".

Используемый объект необязательно указывать прямо в шаблоне:

<div :class="classObject"></div>

1

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

1
2
3
4
5
6
7
8

Результат будет таким же. Можно также использовать и вычисляемые свойства, которые возвращают объект — это очень распространённый и мощный приём:

<div :class="classObject"></div>

1

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Синтаксис с массивом

В :class можно передавать и массив:

<div :class="[activeClass, errorClass]"></div>

1

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

1
2
3
4
5
6

В результате получим:

<div></div>

1

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

<div :class="[isActive ? activeClass : '', errorClass]"></div>

1

В этом случае errorClass будет применён к элементу всегда, но activeClass — только в случае истинности isActive.

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

<div :class="[{ active: isActive }, errorClass]"></div>

1

Использование с компонентами

Эта секция предполагает знакомство с компонентами Vue. Вы можете спокойно пропустить её сейчас и вернуться позднее.

При использовании атрибута class на пользовательском компоненте с одним корневым элементом, классы будут добавлены к этому корневому элементу. Собственные классы элемента при этом не будут потеряны.

Возьмём, к примеру, такой компонент:

const app = Vue.createApp({})
app.component('my-component', {
  template: '<p>Привет</p>'
})

1
2
3
4
5

Если указать дополнительные классы на компоненте:

<div>
  <my-component></my-component>
</div>

1
2
3

В результате отрисовки получим:

<p>Привет</p>

1

То же самое справедливо для связывания классов с данными:

<my-component :class="{ active: isActive }"></my-component>

1

Если isActive истинно, результирующий HTML будет:

<p>Привет</p>

1

Если у компонента несколько корневых элементов, то потребуется определить который из них получит эти классы. Это реализуется добавлением свойства $attrs на элемент:

<div>
  <my-component></my-component>
</div>

1
2
3

const app = Vue.createApp({})
app.component('my-component', {
  template: `
    <p :class="$attrs.class">Привет!</p>
    <span>Это дочерний компонент</span>
  `
})

1
2
3
4
5
6
7
8

Подробнее о наследовании атрибутов в компонентах можно узнать в разделе Non-Prop Attributes.

Связывание inline-стилей

Объектный синтаксис

Объектная запись для :style выглядит почти как CSS, хотя, на самом деле, это объект JavaScript. Для указания свойств CSS можно применять как camelCase, так и kebab-case (не забывайте про кавычки при использовании kebab-case):

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

1

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

1
2
3
4
5
6

Можно выносить объект стилей из шаблона, чтобы сделать код чище:

<div :style="styleObject"></div>

1

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

1
2
3
4
5
6
7
8

Можно использовать и вычисляемые свойства, возвращающие объекты стилей.

Синтаксис с массивом

Запись :style с массивом позволяет применить несколько объектов стилей к одному и тому же элементу:

<div :style="[baseStyles, overridingStyles]"></div>

1

Автоматические префиксы

При использовании в :style свойств CSS, требующих указания вендорных префиксов (opens new window), Vue автоматически определит это и добавит подходящие префиксы к применяемым стилям.

Множественные значения

Можно предоставить массив из нескольких (префиксных) значений для свойства style, например:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

1

Это приведёт к отображению последнего значения в массиве, поддерживаемого браузером. В этом примере он будет отображать display: flex для браузеров, которые поддерживают flexbox без префиксов.

Удаление и добавление имен классов из элементов с использованием чистого JavaScript – clubmate.

fi

Удаление и добавление имен классов из элементов с использованием чистого JavaScript быть удалены или добавлены с помощью метода

classList , или они могут быть изменены напрямую с помощью свойства className .

Использование метода classList

classList — довольно умная и самая современная система управления именами классов CSS в элементах через JavaScript.

Удалить имена классов

Вот как удалить одно имя класса :

 const element = document.getElementById('foo')
element.classList.remove('bar')

Несколько имен классов можно удалить, передав больше параметров методу remove :

 element.classList.remove('bar', 'baz')

Или удалить данное имя класса из всех элементов одновременно ; в этом примере я удаляю .open класс из элемента аккордеона:

 const AccordionItems = [...document. getElementsByClassNme('accordion-item')]
аккордеонItems.forEach(accordionItem => {
  аккордеонItem.remove('открыть')
})

Добавление имен классов

Добавление имен классов мало чем отличается:

 const element = document.getElementById('foo')
element.classList.add('my-class')

Все методы classList

Я думаю, что remove и add являются наиболее часто используемыми методами класса classList, но вот все они, с краткими примерами:

remove()
Удаляет класс из списка классов элемента. Если класс не существует в списке классов элемента, он не выдаст ошибку или исключение.
add()
Добавляет класс в список классов элемента. Если класс уже существует в списке классов элемента, он не будет добавлен снова.
toggle()
Переключает существование класса в списке классов элемента. Очень полезно при обработке кликов, например:
 постоянная кнопка = document. getElementById('кнопка')
button.addEventListener('щелчок', событие => {
  event.target.classList.toggle('видимый')
})
contains()
Проверяет, содержит ли список классов элемента определенный класс
 if (element.classList.contains('my-class')) {
  // Делаем что-то...
} еще {
  // Делаем другие вещи...
}

Поддержка браузера

classList поддерживается, начиная с IE10, Opera Mini не поддерживается. См. таблицу поддержки на сайте caniuse.com

Свойство className

В HTML мы можем просто сказать , но в JavaScript слово «класс» является зарезервированным словом, поэтому его нужно называть className вместо этого:

 const element = document. getElementById('foo')
element.className = 'my-class'

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

 const element = document. getElementById('foo ')
element.className += 'мой-класс'

Управление именами классов в NodeList

NodeList — это объект, подобный массиву, но не массив как таковой. Но цикл for работает без проблем:

 const element = document.getElementByTagName('div')
for (var i = 0; i < element.length; i++) {
  element[i].className += 'номера строк'
}

Несколько вспомогательных функций для управления классами

Я обнаружил следующие полезные функции, дополнительную информацию см. в источниках.

Удалить класс CSS с помощью className и регулярного выражения

Двойное экранирование \\b в регулярном выражении означает границу слова. Узнайте больше о классах кратких символов регулярного выражения.

 функция removeClass (имя класса, элемент) {
  пусть cn = element.className
  const regexPattern = new RegExp('\\s?\\b' + className + '\\b', 'g')
  cn = cn.replace (regexPattern, '')
  element.className = cn
}

Или то же самое, но более компактно, с использованием групп без захвата:

 const removeClass = (className, element) => {
  element. |\\s)' + className + '(?!\\S)'),
    ''
  )
}

Источник

Добавить класс, используя

classList 
 const addClass = function (_element, _classes) {
  пусть classList = _element.classList
  пусть _лен
  for (пусть _i = 0, _len = _classes.length; _i < _len; _i++) {
    постоянный элемент = _classes[_i]
    если (classList.length <= _len) {
      classList.add (элемент)
    } еще {
      classList.remove (элемент)
    }
  }
  вернуть _элемент
}

Источник

Добавить класс Используя функцию className 

 function addClass(className, element) {
  const cn = element.className
  // Тест на существование
  если (cn.indexOf(className) !== -1) вернуть
  // Добавляем пробел, если у элемента уже есть класс
  if (cn !== '') className = ' ' + className
  element.className = cn + className
}

Источник

Здесь будут комментарии, но система комментирования еще не готова, извините. Напишите мне в Твиттере @interne, если хотите внести поправку и т. д.

Как динамически добавить имя класса в Vue

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

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

Добавить имя динамического класса так же просто, как добавить свойство :class="classname" к вашему компоненту. Какое бы имя класса ни оценивалось, оно будет именем класса, добавляемым к вашему компоненту.

Конечно, есть еще много чего, что мы можем сделать с помощью динамических классов в Vue.

В этой статье мы расскажем о многом:

  • Использование статических и динамических классов в Vue
  • Как мы можем использовать регулярные выражения Javascript для вычисления нашего класса
  • Синтаксис массива для имен динамических классов
  • Синтаксис объекта (для большего разнообразия!)
  • Создание имен классов на лету
  • Как использовать имена динамических классов в пользовательских компонентах

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

В Vue мы можем добавлять к нашим компонентам как статические, так и динамические классы.

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

Если бы мы хотели добавить статический класс, это было бы точно так же, как в обычном HTML:

Динамические классы очень похожи, но мы должны использовать специальный синтаксис свойств Vue, v-bind , чтобы связать выражение Javascript с нашим классом:

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

Это связано с тем, что синтаксис v-bind принимает все, что мы передаем, как значение Javascript. Добавление кавычек гарантирует, что Vue будет рассматривать его как строку.

Vue также имеет сокращенный синтаксис для v-bind :

 <шаблон>
  
    Вот как вы добавляете статические классы в Vue.

Что действительно здорово, так это то, что вы даже можете иметь как статические, так и динамические классы в одном и том же компоненте.

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

  
 экспорт по умолчанию {
  данные() {
    возвращаться {
      тема: 'синяя тема',
    };
  }
}; 
 .синяя тема {
  цвет: темно-синий;
  фон: белый;
}

Мы можем установить переменную, содержащую строку любого имени класса, которое мы хотим.

Если бы мы хотели сделать это для нашего компонента Button , мы могли бы сделать что-то простое:

  
 экспорт по умолчанию {
  реквизит: {
    тема: {
      тип: Строка,
      по умолчанию: 'по умолчанию',
    }
  }
}; 
 .по умолчанию {}
.начальный {}
.danger {}

Теперь любой, кто использует компонент Button , может просто установить тема поддерживает любую тему, которую они хотят использовать.

Если ничего не установить, будет добавлен класс .default .

Если установить его на primary , он добавит класс .primary .

Приведение в порядок вещей с помощью вычисляемых реквизитов

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

К счастью, у нас есть простое решение.

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

  
 экспорт по умолчанию {
  вычислено: {
    учебный класс() {
      вернуть темный режим? «темная тема» : «светлая тема»;
    }
  }
};

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

Этот паттерн — перемещение объектов из шаблона в вычисляемые реквизиты — работает со всеми видами объектов. Это один из лучших способов очистить ваши компоненты Vue!

bind — Alpine.js

x-bind позволяет вам устанавливать атрибуты HTML для элементов на основе результатов выражений JavaScript.

Например, вот компонент, в котором мы будем использовать x-bind для установки значения заполнителя ввода.

 
 
 ..' }">

Если x-bind: слишком многословно на ваш вкус, вы можете использовать сокращение: : . Например, вот тот же элемент ввода, что и выше, но измененный для использования сокращенного синтаксиса.

x-bind чаще всего используется для установки определенных классов элемента на основе вашего состояния Alpine.

Вот простой пример простого переключателя раскрывающегося списка, но вместо использования x-show мы будем использовать «скрытый» класс для переключения элемента.

 
 
 
 
  
 
   
 
 
 
 
 Dropdown Contents. ..

Теперь, когда open равно false , в раскрывающийся список будет добавлен «скрытый» класс.

Сокращенные условные выражения

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

Обратное также доступно для вас. Допустим вместо открыть , мы используем переменную с обратным значением: закрыто .

Синтаксис объекта класса

Alpine предлагает дополнительный синтаксис для переключения классов, если вы предпочитаете. Передавая объект JavaScript, где классы являются ключами, а логические значения — значениями, Alpine будет знать, какие классы применить, а какие удалить. Например:

Этот метод предлагает уникальное преимущество перед другими методами. При использовании объектного синтаксиса Alpine НЕ сохраняет исходные классы, примененные к атрибуту class элемента.

Например, если вы хотите применить «скрытый» класс к элементу до загрузки Alpine и использовать Alpine для переключения его существования, вы можете добиться такого поведения только с помощью синтаксиса объекта:

Если это вас смутило, давайте углубимся в то, как Alpine обрабатывает x-bind:class иначе, чем другие атрибуты.

Особое поведение

x-bind:class ведет себя иначе, чем другие внутренние атрибуты.

Рассмотрим следующий случай.

Если бы "класс" был любым другим атрибутом, привязка :class перезаписала бы любой существующий атрибут класса, что привело бы к opacity-50 должен быть перезаписан либо скрытым , либо '' .

Однако Alpine по-разному относится к креплениям класса . Это достаточно умно, чтобы сохранить существующие классы для элемента.

Например, если скрыть равно true, приведенный выше пример приведет к следующему элементу DOM:

дел >

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

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

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

 
 
 
 
  

Условная встроенная стилизация возможна с использованием выражений, как и в x-bind:class. Здесь также можно использовать операторы короткого замыкания, используя объект стилей в качестве второго операнда.

 
 
 
 
  

Одно из преимуществ этого подхода возможность смешивать его с существующими стилями элемента:

 
 
 
 
  

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

 
 
 
 
 
 
 
 
 
 
   
 
 
 
 
 ..>

x-bind позволяет привязать к элементу объект с различными директивами и атрибутами.

Ключи объекта могут быть любыми, которые вы обычно записываете в качестве имени атрибута в Alpine. Сюда входят директивы и модификаторы Alpine, а также простые атрибуты HTML. Значения объекта представляют собой либо простые строки, либо, в случае динамических директив Alpine, обратные вызовы, которые должны быть оценены Alpine.

 
  
 Содержимое раскрывающегося списка< /span>