Изменить class для элемента с помощью JavaScript/jQuery
Современный HTML5 сильно улучшается и тем самым дает больше возможностей для JavaScript. В этой записи я покажу как можно изменять, добавить или удалить класс (class) для элементов с помощью JavaScript или jQuery.
HTML для демо
Допустим у нас есть такой элемент, у которого есть три класса «test1», «test2» и «hello-world» и id «myel».
Текст внутри элемента
Это пример будет использоваться для JavaScript и jQuery решений ниже.
JavaScript решение
Современные браузеры добавили новые способы управления классами для элементов, например classList.
Ниже предоставлен пример его работы с официального сайта MDN:
var elem = document.querySelector("#clock") //Выведем классы console.log(elem.classList); //DOMTokenList ["example", "for", "you"] //Добавим классы elem.classList.add("ok", "understand"); console.log(elem.classList); //DOMTokenList ["example", "for", "you", "ok", "understand"] //Переключим классы elem.classList.toggle("you"); elem.classList.toggle("he"); console.log(elem.classList); //DOMTokenList ["example", "for", "ok", "understand", "he"] //Проверим класс console.log(elem.classList.contains("example")); //true console.log(elem.classList.contains("lol")); //false //И удалим классы elem.classList.remove("example", "for", "understand", "he"); console.log(elem.classList); //DOMTokenList ["ok"]
Современное HTML решение используя classList
Для начала нам нужно найти сам элемент с помощью document.getElementById() и далее использовать метод classList . Выглядит это все следующим образом:
// Добавить "test3" в список классов document.getElementById("myel").classList.add('test3'); // Удалим test2 из списка всех классов document.getElementById("myel").classList.remove('test2'); // если у элемента класс test1? // вернет "true" потому что он действительно есть if ( document.getElementById("myel").classList.contains('test1') ) // Класс "dd-11" будет добавляться и убираться document.getElementById("myel").classList.toggle('dd-11');
В целом весь код выше в комментариях и вам должно понять. Но вот еще небольшое разъяснение:
- add() — добавляет новый класс
- remove() — удаляет указанный класс
- contains() — проверяет существование класса
- toggle() — ставит и удаляет класс, этот метод можно использовать для например нажатия на кнопку, чтобы у элемента ставился и убирался класс
Если лишь одно НО: Internet Explorer до 10 версии не поддерживают метод classList. Если для вас это важно, то лучше воспользоваться другими способами, которые я буду описывать ниже в этом посте. Но не забывайте, что веб очень быстро улучшается и уже есть первые попытки IE к поддержке этого метода, но лучше пока что не рисковать.
100% рабочий способ, поддерживаемый всеми браузерами (кроссбраузерный)
Выглядит он вот так:
document.getElementById("myel").className = "wow";
Мы используем className для манипуляции классами элемента «myel». Есть лишь один минус этого способа — он заменит все текущие классы элемента на «wow».
Самое важное в этом способе — это его кроссбраузерность.
Если ваша задача состоит в том, чтобы изменить класс(-ы) для одного-двух элементов на странице, то лучше использоваться JavaScript, и забыть про jQuery, потому что вы лишь добавите весь странице и она станет медленнее грузиться.
jQuery
В jQuery все упрощенно до невозможности и работает кроссбраузерно.
Например, чтобы добавить класс «test7», нужно воспользоваться методом addClass():
$("myel").addClass("test7");
Чтобы удалить его, нужно использовать removeClass():
$("myel").removeClass("test7");
Если вы хотите заменить все классы на один единственный, то нужно использовать метод attr():
$("myel").attr("class", "test3 test4");
И теперь у «myel» будет только два класса, «test3» и «test4».
Вывод
А что вы используете чаще? JavaScript или jQuery?
Какой способом вам нравится больше всего и почему?
Курсы javascript
Конструкция работает, но (что и логично) не совсем правильно:
.xxx < width: 50px; height: 50px; background: blue; margin: 10px; float: left; >.yyy
Последний раз редактировалось dmitry111, 13.02.2013 в 07:29 .
Как изменить класс элемента с помощью javascript?
Fatal error: Smarty error: [in ./inc/arch7/index.tpl line 530]: syntax error: unrecognized tag: el.classList.remove(‘havesubchild’) (Smarty_Compiler.class.php, line 446) in /home/user3124/grazvalda.websolutions.pp.ua/inc/frontend/smarty/libs/Smarty.class.php on line 1093
Это уже проблема не моего кода, а того, куда вы его засунули
asd1982, откройте документацию Smarty. Посмотрите, как там вставлять JS-код в шаблонах.
Как заменить класс у элемента js
Частная коллекция качественных материалов для тех, кто делает сайты
- Creativo.one2000+ уроков по фотошопу
- Фото-монстр300+ уроков для фотографов
- Видео-смайл200+ уроков по видеообработке
- Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни
- Главная»
- Уроки»
- Уроки jQuery для начинающих
В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 26 Июля 2017 Просмотров: 40607 Комментариев: 0
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 5 Июня 2017 Просмотров: 23100 Комментариев: 0
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 3 Июня 2017 Просмотров: 16351 Комментариев: 0
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 30 Мая 2017 Просмотров: 19099 Комментариев: 0
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 24 Мая 2017 Просмотров: 66867 Комментариев: 0
Stimed — стили в зависимости от времени суток
Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.