Classlist add javascript не работает

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

В этой статье мы рассмотрим различные методы для работы с классами и стилями элемента. Познакомимся со свойствами classList и style, и примерами их использования для управления соответственно классами и стилями элементов на странице.

Управление классом (классами) элемента

Первый способ взаимодействия с классами элементов сводится к использованию DOM-свойства className . Данное свойство является отражением атрибута class в DOM. DOM-свойство className не было названо class из-за того, что раньше в JavaScript зарезервированные слова нельзя было использовать в качестве названия свойств объектов. Если вы не знаете, что такое DOM-свойства и чем они отличаются от атрибутов, то прочитать про это можете в этой статье.

Пример, в котором выполним различные операции над классом элемента используя DOM-свойство className :

Второй способ выполнить операции, связанные с классом элемента – это использовать методы для управления атрибутами.

Пример, в котором выполним действия как вышеприведённом коде, но с использованием методов для управления атрибутами:

DOM-свойство className и атрибут class всегда синхронизуются между собой, это значит, что при изменении одного меняется и другое.

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

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

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

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

Свойство classList

Свойство classList представляет собой специальный объект (DOMTokenList), который содержит методы для выполнения различных операций над классами элемента.

• .add( className1[,className2. ] ) — добавляет один или несколько указанных классов к элементу. Если у элемента уже есть данный класс, то он к нему добавлен не будет.
• .remove( className1[,className2. ] ) — удаляет один или несколько указанных классов у элемента. Если у элемента нет класса, который вы хотите удалить, то никаких действий произведено не будет.
• .contains( className ) – проверяет наличие класса у элемента; в качестве ответа возвращает true или false .
• .toggle( className [,flag] ) — переключает указанное имя класса у элемента, т.е. если у элемента есть данный класс, то убирает его; в противном случае добавляет. Второй параметр ( flag ) необязательный. По умолчанию он имеет значение undefined . Если ему установить значение true или false , то он будет работать как метод add или remove , т.е. либо добавлять класс к элементу, либо удалять его у него.

Пример, в котором показано как можно выполнять различные действия, связанные с классами элемента с использованием методов classList :

Объект classList является псевдомассивом, т.е. его можно перебрать как массив.

Пример, в котором переберём все классы classList :

Свойство classList поддерживается всеми современными браузерами. Если нужна поддержка совсем старых браузеров (например, Internet Explorer 8, 9), то в этом случае можно воспользоваться каким-нибудь полифиллом.

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

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

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

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

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

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

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

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

Свойство cssText

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

Пример, в котором установим стили «font-size:40px; color:blue;» элементам с классом intro :

При установке стилей с помощью свойства style.cssText нужно быть осторожным. Эти связано с тем, что при установке это свойство удаляет все стили, которые есть у элемента. Т.е. те, которые мы установили ему с помощью атрибута style и в соответствующем ему DOM-свойстве.

Выполнить операцию, аналогичную той которую выполняет свойство style.cssText , можно ещё через метод setAttribute .

Задания

1. Написать скрипт, используя classList , для установления элементу с классом text трех классов: size-40 , color-red и bg-yellow :

2. Написать код для установления стиля «width: 180px; height: 180px;» всем элементам на странице с классом, начинающимся со слов block- .

Источник

Element.classList

Описание

Свойство classList возвращает псевдомассив DOMTokenList , содержащий все классы элемента.

У classList есть примитивная альтернатива — свойство className, которое содержит значение атрибута class элемента.

Синтаксис

• Результат — псевдомассив DOMTokenList , содержащий все классы узла elem

Методы

ClassList является геттером. Возвращаемый им объект имеет несколько методов:

add( String [,String] ) Добавляет элементу указанные классы remove( String [,String] ) Удаляет у элемента указанные классы item ( Number )
Результат аналогичен вызову сlassList[Number] toggle ( String [, Boolean])
Если класс у элемента отсутствует — добавляет, иначе — убирает. Когда вторым параметром передано false — удаляет указанный класс, а если true — добавляет. Если вторым параметром передан undefined или переменная с typeof == ‘undefined’, поведение будет аналогичным передаче только первого параметра при вызове toggle. contains ( String )
Проверяет, есть ли данный класс у элемента (вернёт true или false)

И, конечно же, у ClassList есть заветное свойство length, которое возвращает количество классов у элемента.

Источник

Добавление/удаление классов с помощью JavaScript свойства classList

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

Element.classList

Свойство classList возвращает список классов элемента. Так же в этом свойстве присутствует 4 метода:

• add – добавление класса;
• remove – удаление класса;
• toggle – переключение класса;
• contains – проверка наличия класса у элемента.

Поддержка

Все современные браузеры поддерживают данный функционал. IE тоже, начиная с 10 версии (так же есть специальная библиотека, которая позволяет данным методам работать в IE7 и выше).

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://callmenick.com/2014/10/23/add-remove-classes-with-javascript-property-classlist/
Перевел: Станислав Протасевич
Урок создан: 23 Октября 2014
Просмотров: 137674
Правила перепечатки

5 последних уроков рубрики «jQuery»

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Источник

Добавляем и удаляем CSS-классы при помощи Javascript

В этой статье мы расскажем о двух способах манипуляции с HTML class . В первом используется Javascript-свойство classList , а во втором задействуется библиотека jQuery . Для начала, взгляните на следующий код:

В нем представлена кнопка с событием onclick , которое позволяет переключать цвет кнопки. CSS-код определяет классы для установки цвета фона:

Единственное, что здесь остается сделать, это реализовать функцию toggleColor() :

classList

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

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

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

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

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

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

JQuery

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

Можно использовать addClass() , removeClass() и hasClass() для toggleColor() . Обратите внимание, что новые HTML style class можно перечислять через пробел в той же строке.

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

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

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

Источник

Есть ли способ добавить / удалить несколько классов в одной инструкции с classList?

Пока я должен сделать это:

Хотя это возможно в jQuery, вот так

Я хотел бы знать, есть ли какой-либо родной способ добавить или удалить.

13 ответов

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

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

Эти оболочки позволяют указывать список классов как отдельные аргументы, как строки с пробелами или разделенными запятыми элементами, или их комбинации. Пример см. В http://jsfiddle.net/jstoolsmith/eCqy7.

Свойство classList гарантирует, что повторяющиеся классы не будут добавлены в элемент без необходимости. Чтобы сохранить эту функциональность, если вам не нравятся рукописные версии или версия jQuery, я бы предложил добавить функцию addMany и removeMany в DOMTokenList (тип classList ) :

Затем они могут быть использованы так:

Обновить

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

Очень простое, не причудливое, но работающее решение, в которое я должен верить, очень кросс-браузерное

Создать эту функцию

Назовите это так: removeAddClasses (node.classList, arrayToRemove, arrayToAdd);

. где arrayToRemove — это массив имен классов, которые нужно удалить: [‘myClass1’, ‘myClass2’] etcetera

. и arrayToAdd — это массив имен классов, которые нужно добавить: [‘myClass3’, ‘myClass4’] etcetera

Более новые версии спецификации DOMTokenList допускают множественные аргументы для add() и < >, а также второй аргумент для toggle() для принудительного вызова состояния.

На момент написания Chrome поддерживает несколько аргументов для add() и remove() , но ни один из других браузеров этого не делает. IE 10 и ниже, Firefox 23 и ниже, Chrome 23 и ниже и другие браузеры не поддерживают второй аргумент toggle() .

Я написал следующий небольшой polyfill, чтобы прикрыть меня, пока поддержка не расширится:

Ожидается современный браузер с ES5-совместимостью и DOMTokenList , но я использую это заполнение в нескольких специально предназначенных средах, поэтому он отлично работает для меня, но может потребоваться настройка сценариев, которые будут работать в устаревших браузерных средах, таких как как IE 8 и ниже.

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

let classes = [‘first’, ‘second’, ‘third’]; elem.classList.add(. classes);

Вы можете сделать как показано ниже

Удалить

TL; DR;

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

Вот обходной путь для пользователей IE 10 и 11, который казался довольно простым.

Источник