Автор оригинала: FreeCodeCamp Community Member.
Айо Исаия
В качестве разработчика переднего конца вам часто нужно менять правила CSS на основе того, как пользователь взаимодействует с элементами на странице.
В прошлом я полагался на jQuery, чтобы справиться с такими видами манипуляций DOM для меня. Но в некоторых случаях это не имеет смысла импортировать всю библиотеку jQuery, чтобы вы могли выполнить некоторые основные манипулирования DOM.
К счастью, HTML5 предлагает способ сделать это изначально, без необходимости jQuery.
Как я обнаружил метод классы HTML5
Несколько дней назад я читал какой-то код. Я заметил, что один проект включал jQuery в качестве зависимости, просто чтобы они могли добавлять и удалять классы, когда пользователь нажимал кнопку на странице. Весь код взаимодействия составил всего 11 строк кода.
Я думал, что это странно, они делали это таким образом. Это был эквивалент с использованием базуки (jQuery), чтобы убить комарную (добавление и удаление классов на клик).
Мне пришло в голову, что я, вероятно, сделал подобные вещи в моих предыдущих проектах кодирования. Поэтому я решил попытаться повторить ту же функциональность, используя простой JavaScript и посмотреть, что я могу извлечь из этого.
Быстрый поиск расширился несколько вариантов для этого в простом JavaScript. Я пошел с Классик Способ, потому что это легко понять, и поддержка кросс-браузера довольно хорошая.
Обратите внимание, что если вам нужно поддержать версии Internet Explorer старше IE 11, вам может потребоваться найти альтернативный метод или использовать Polyfill Отказ
Если вы полностью зависят от использования JQuery для обработки DOM, это отличное место, чтобы начать получить некоторую независимость от jQuery.
Что такое API класс листа?
API ClassList HTML5 предоставляет возможность захватить все классы, связанные с элементом, чтобы вы могли использовать JavaScript для их изменения.
Использование Свойства Classlist DOM на элементе вернется DomtokenList Отказ Это содержит все классы, применяемые к элементу, и Длина Собственность, которое означает общее количество классов на этом элементе.
Посмотрите на этот пример:
//JavaScriptvar about = document.getElementById("about"); console.log(about.classList); //logs { 0: "content-wrapper" 1: "about" 2: "animated" length: 3 value: "content-wrapper about animated" }Вы можете попробовать вышеперечисленное в вашем браузере, чтобы увидеть его в действии.
Получение классов элемента все хорошо и хорошо, но это не все, что полезно самостоятельно. Нам нужен способ управлять и обновлять эти классы. Свойство Classlist предоставляет несколько методов, которые делают только что:
- Добавить () : Добавляет указанные классы
- Удалить () : Удаляет указанные классы
- содержит() : Проверяет, существует ли указанный класс на элементе
- Переключить () : переключает указанный класс
- Индекс () : возвращает класс в указанную позицию в списке
- Длина : возвращает количество классов
Давайте посмотрим на каждого по очереди.
Добавление классов
Добавление класса на элемент простой. Просто примените имя класса в качестве аргумента для Добавить () метод. Обратите внимание, что если имя класса уже существует на элементе, он больше не будет добавлен.
//JavaScriptdocument.getElementById("headline").classList.add("title"); //gives class="heading title"Чтобы добавить несколько классов, отделите каждый класс с запятой:
//JavaScriptdocument.getElementById("headline").classList.add("title", "headline"); //gives class="heading title headline"Снятие классов
Чтобы удалить класс, все, что вам нужно сделать, это пройти имя класса в качестве аргумента для Удалить () метод. Если имя класса уже не существует в Классик , ошибка брошена.
//JavaScriptdocument.getElementById("header").classList.remove("masthead"); //gives class="clearfix"Чтобы удалить несколько классов, отделите каждый класс с запятой:
//JavaScriptdocument.getElementById("header").classList.remove("masthead", "headline"); //gives class="clearfix"Проверьте, существует ли класс
Используя Содержит () Метод, мы можем проверить, присутствует ли указанный класс в элементе Классик и выполнить операции на основе возвращаемого значения.
Например:
//JavaScriptvar button = document.getElementById("btn"); if (button.classList.contains("hidden")) { //do something } else { //do something else}Переключение классов
Добавление или удаление класса на основе действий пользователя – это общее для этого. Это было именно то, что я хотел достичь с классным чисом.
Вы можете переключаться между добавлением и удалением, используя Переключить () метод.
Вот что я в конце концов сделал:
//JavaScriptvar page = document.getElementById("page"); var menu = document.getElementById("menu"); var nav = document.getElementById("navigation"); function hasClass() { page.classList.toggle("open"); menu.classList.toggle("active"); nav.classList.toggle("hidden"); }Проверьте количество классов
Чтобы узнать, сколько классов применяется к элементу, используйте Длина имущество:
//JavaScriptdocument.getElementById("navbar").classList.length; // 2Обертывание
Как видите, API класс спицы прост в использовании. Я рекомендую вам начать изучать его возможности в своих собственных приложениях.
Кроме того, оставьте комментарий, если у вас есть какие-либо вопросы, или обратитесь к мне на Twitter Отказ Для получения дополнительных статей, как этот, проверьте мой блог . Спасибо за прочтение!
Оригинал: “https://www.freecodecamp.org/news/how-to-manipulate-classes-using-the-classlist-api-f876e2f58236/”