Как удалить класс в js

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

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

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

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

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 ? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет.

Посещённые ссылки могут быть окрашены с помощью псевдокласса :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-позиционирование для отображения элемента в заданных координатах. Исходный документ имеет необходимые стили.

Добавление/удаление классов с помощью 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
Просмотров: 169542
Правила перепечатки

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

• 

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

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

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

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

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

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

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?

Вот код, но класс не удаляется и пишется ошибка document.getElementByClass is not a function, в чем может быть проблема?

• Вопрос задан более года назад
• 1162 просмотра

• Facebook
• Вконтакте
• Twitter

Элементов с этим классом может быть и несколько, так что не забываем про индекс
document.getElementsByClassName(«mystyle»)[0]

• Facebook
• Вконтакте
• Twitter

Помести вызов функции сюда:

или через обработчик DOMContentLoaded:

Сделал так, теперь пишет Cannot read property ‘getElementsByClassName’ of undefined
at myFunction

Il’ia Kartovitskii, Спасибо, помогло наконец-то! Выходит

нужно всегда ставить чтоб заработала функция?

Игорь Гула, не всегда, почитай про DOM, как работает порядок загрузки страницы

Не забудь решением ответ отметить 🙂

Игорь Гула, js код выполянеется сразу как он прилетел с сервера(и распарсился). Если твой
<script> стоит в теле html выше чем <div > то он выпонится раньше чем <div > вообще появится и, само собой, оного не найдёт. Код решения откладывает выпонение до загрузки страницы: onload — вместе с картинками и прочим медиа, DOMContentLoaded только html кода. Откладывать таким образом код удобно, но можно просто поместить <script> после <div > и тогда тоже всё будет работать.