Как удалить класс в js
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 71adcfb7dcbb697f • Your IP : 82.102.23.104 • Performance & security by Cloudflare
Изменить class для элемента с помощью JavaScript/jQuery
Современный HTML5 сильно улучшается и тем самым дает больше возможностей для JavaScript. В этой записи я покажу как можно изменять, добавить или удалить класс (class) для элементов с помощью JavaScript или jQuery.
HTML для демо
Допустим у нас есть такой элемент, у которого есть три класса «test1», «test2» и «hello-world» и id «myel».
Это пример будет использоваться для JavaScript и jQuery решений ниже.
JavaScript решение
Современные браузеры добавили новые способы управления классами для элементов, например classList.
Ниже предоставлен пример его работы с официального сайта MDN:
Современное HTML решение используя classList
Для начала нам нужно найти сам элемент с помощью document.getElementById() и далее использовать метод classList . Выглядит это все следующим образом:
В целом весь код выше в комментариях и вам должно понять. Но вот еще небольшое разъяснение:
- add() — добавляет новый класс
- remove() — удаляет указанный класс
- contains() — проверяет существование класса
- toggle() — ставит и удаляет класс, этот метод можно использовать для например нажатия на кнопку, чтобы у элемента ставился и убирался класс
Если лишь одно НО: Internet Explorer до 10 версии не поддерживают метод classList. Если для вас это важно, то лучше воспользоваться другими способами, которые я буду описывать ниже в этом посте. Но не забывайте, что веб очень быстро улучшается и уже есть первые попытки IE к поддержке этого метода, но лучше пока что не рисковать.
100% рабочий способ, поддерживаемый всеми браузерами (кроссбраузерный)
Выглядит он вот так:
Мы используем className для манипуляции классами элемента «myel». Есть лишь один минус этого способа — он заменит все текущие классы элемента на «wow».
Самое важное в этом способе — это его кроссбраузерность.
Если ваша задача состоит в том, чтобы изменить класс(-ы) для одного-двух элементов на странице, то лучше использоваться JavaScript, и забыть про jQuery, потому что вы лишь добавите весь странице и она станет медленнее грузиться.
jQuery
В jQuery все упрощенно до невозможности и работает кроссбраузерно.
Например, чтобы добавить класс «test7», нужно воспользоваться методом addClass():
Чтобы удалить его, нужно использовать removeClass():
Если вы хотите заменить все классы на один единственный, то нужно использовать метод attr():
И теперь у «myel» будет только два класса, «test3» и «test4».
Изменение атрибутов, классов и стилей в DOM
Ранее в этой серии мануалов вы научились создавать, вставлять, заменять и удалять элементы в DOM (Document Object Model) с помощью встроенных методов.
Улучшая свои навыки управления DOM, вы можете использовать интерактивные возможности JavaScript и изменять веб-элементы.
В этом мануале вы научитесь изменять стили, классы и другие атрибуты узлов HTML-элемента. Это даст вам более полное представление о том, как управлять важными элементами внутри DOM.
Обзор выбираемых элементов
До недавнего времени чаще всего для выбора и изменения элементов в DOM использовалась популярная библиотека JavaScript, jQuery. jQuery упрощала процесс выбора одного или нескольких элементов и одновременно применяла все изменения к ним. В мануале Доступ к элементам в DOM мы рассмотрели методы DOM для захвата и работы с узлами в простейшем JavaScript.
Как вы помните, методы document.querySelector() и document.getElementById() используются для доступа к единому элементу. Используя div с атрибутом id (как показано ниже), можно также получить доступ к этому элементу.
Метод querySelector() более надежный, поскольку он может выбирать элемент на странице по любому типу селектора.
// Both methods will return a single element
const demoId = document.querySelector(‘#demo-id’);
Получив доступ к одному элементу, можно легко обновить часть элемента, такую как текст внутри.
// Change the text of one element
demoId.textContent = ‘Demo ID text updated.’;
Однако при доступе к нескольким элементам с помощью общего селектора, конкретного класса, нужно итерировать все элементы в списке. В приведенном ниже коде есть два элемента div с общим значением класса.
<div >Demo Class 1</div>
<div >Demo Class 2</div>
Используйте querySelectorAll(), чтобы захватить все элементы с применяемым к ним классом demo-class, и forEach(), чтобы перебрать их и применить изменения. Также можно получить доступ к определенному элементу с помощью querySelectorAll() так же, как и в работе с массивом, через скобки.
// Get a NodeList of all .demo elements
const demoClasses = document.querySelectorAll(‘.demo-class’);
// Change the text of multiple elements with a loop
demoClasses.forEach(element => <
element.textContent = ‘All demo classes updated.’;
>);
// Access the first element in the NodeList
demoClasses[0];
Это одно из самых важных различий, которое следует учитывать при переходе от jQuery к JavaScript. Многие примеры изменения элементов не объясняют процесс применения этих методов и свойств к нескольким элементам.
Свойства и методы в этой статье часто присоединяются к прослушивателям событий, чтобы реагировать на клики, зависания или другие триггеры.
Примечание: Методы getElementsByClassName() и getElementsByTagName() возвращают коллекции HTML, не имеющие доступа к методу forEach(), который есть у querySelectorAll(). В этих случаях вам нужно будет использовать стандартный цикл for для итерации по коллекции.
Изменение атрибутов
Атрибуты – это значения, содержащие дополнительную информацию об элементах HTML. Обычно они входят в пары имя-значение и в зависимости от элемента могут быть неотъемлемыми.
Некоторые из наиболее распространенных атрибутов HTML – это атрибут src тега img, href тега а, class, id и style. Найти полный список атрибутов HTML можно в Mozilla Developer Network. Пользовательские элементы, которые не являются частью стандарта HTML, получат префикс data-.
В JavaScript есть четыре метода изменения атрибутов элемента:
| Метод | Описание | Пример |
| hasAttribute() | Возвращает логическое значение true или false. | element.hasAttribute(‘href’); |
| getAttribute() | Возвращает значение указанного атрибута или null. | element.getAttribute(‘href’); |
| setAttribute() | Добавляет или обновляет значение указанного атрибута. | element.setAttribute(‘href’, ‘index.html’); |
| removeAttribute() | Удаляет атрибут из элемента. | element.removeAttribute(‘href’); |
Создайте новый HTML-файл с тегом img с одним атрибутом. Вы можете использовать любое локальное изображение, если работаете оффлайн.
Загрузите этот файл HTML в современный браузер и откройте встроенную консоль разработчика. Вы увидите загруженное вами изображение.
Теперь проверьте работу методов атрибутов на ходу.
// Assign image element
const img = document.querySelector(‘img’);
img.hasAttribute(‘src’); // returns true
img.getAttribute(‘src’); // returns «. shark.png»
img.removeAttribute(‘src’); // remove the src attribute and value
На этом этапе вы удаляете атрибут src и значение, связанное с img, но вы можете сбросить этот атрибут и присвоить значение другого изображения с помощью img.setAttribute ():
Теперь можно изменить атрибут напрямую, присвоив новое значение атрибуту как свойство элемента и установив в src прежнее значение, my-image.png
Методы hasAttribute() и getAttribute() обычно используются с условными операторами, а методы setAttribute() и removeAttribute() используются для непосредственного изменения DOM.
Изменение классов
Атрибут class соответствует селекторам по классу CSS. Не путайте это с классами ES6, особым типом функции JavaScript.
Классы CSS используются для применения стилей к нескольким элементам, в отличие от ID, которые могут встречаться на странице только один раз. В JavaScript для работы с атрибутом класса есть свойства className и classList.
| Метод/свойство | Описание | Пример |
| className | Возвращает или задает значение класса | element.className; |
| classList.add() | Добавляет одно или несколько значений класса | element.classList.add(‘active’); |
| classList.toggle() | Включает или отключает класс | element.classList.toggle(‘active’); |
| classList.contains() | Проверяет, существует ли значение класса | element.classList.contains(‘active’); |
| classList.replace() | Заменяет существующее значение класса новым значением | element.classList.replace(‘old’, ‘new’); |
| classList.remove() | Удаляет значение класса | element.classList.remove(‘active’); |
Создайте другой файл HTML для работы с методами класса; в нем будет два элемента и несколько классов.
<!DOCTYPE html>
<html lang=»en»>
<style>
body <
max-width: 600px;
margin: 0 auto;
font-family: sans-serif;
>
.active <
border: 2px solid blue;
>
.warning <
border: 2px solid red;
>
.hidden <
display: none;
>
div <
border: 2px dashed lightgray;
padding: 15px;
margin: 5px;
>
</style>
<body>
<div>Div 1</div>
<div >Div 2</div>
</body>
</html>
Откройте файл classes.html в веб-браузере и просмотрите страницу.
Свойство className было введено для предотвращения конфликтов с ключевым словом class, которое встречается в JavaScript и других языках, имеющих доступ к DOM. Вы можете использовать className для присваивания значения непосредственно классу.
// Select the first div
const div = document.querySelector(‘div’);
// Assign the warning class to the first div
div.className = ‘warning’;
Вы присвоили класс warning , определенный в значениях CSS classes.html, первому div.Проверьте страницу в браузере.
Обратите внимание, что если какие-либо классы уже существуют в элементе, это переопределит их. Вы можете добавить несколько разделенных пробелами классов, используя свойство className, или использовать его без операторов присваивания, чтобы получить значение класса в элементе.
Другой способ изменения классов – это свойство classList, которое содержит несколько полезных методов. Эти методы аналогичны методам jQuery addClass, removeClass и toggleClass.
// Select the second div by class name
const activeDiv = document.querySelector(‘.active’);
activeDiv.classList.add(‘hidden’); // Add the hidden class
activeDiv.classList.remove(‘hidden’); // Remove the hidden class
activeDiv.classList.toggle(‘hidden’); // Switch between hidden true and false
activeDiv.classList.replace(‘active’, ‘warning’); // Replace active class with warning class
После применения этих методов веб-страница должна измениться. Проверьте ее в веб-браузере.
В отличие от className, classList.add() добавит новый класс в список существующих классов. Вы также можете добавить несколько классов в виде разделенных запятыми строк. Также для изменения класса элемента можно использовать setAttribute.
Изменение стилей
Свойство style представляет собой встроенные стили HTML-элемента. Часто стили применяются к элементам через таблицу стилей (как мы делали это ранее в этой статье), но иногда приходится добавлять или редактировать встроенный стиль напрямую.
Давайте рассмотрим краткий пример редактирования стилей с помощью JavaScript. Ниже представлен новый HTML-файл с div, который имеет некоторые встроенные стили, необходимые для отображения квадрата.
Откройте браузер и просмотрите в нем файл styles.html. В левом верхнем углу будет квадрат.
Стили редактируются с помощью опции setAttribute().
// Select div
const div = document.querySelector(‘div’);
// Apply style to div
div.setAttribute(‘style’, ‘text-align: center’);
Однако это удалит все существующие встроенные стили элемента. Поскольку этого чаще всего делать не стоит, лучше непосредственно использовать атрибут style.
div.style.height = ‘100px’;
div.style.width = ‘100px’;
div.style.border = ‘2px solid black’;
Свойства CSS написаны в кебаб-корпусе, который является строчными словами, разделенными тире. Важно отметить, что свойства CSS в кебаб-регистре нельзя использовать в свойстве стиля JavaScript. Вместо этого они будут заменены их эквивалентом – верблюжьим регистром (первое слово состоит из строчных букв, а все последующие слова начинаются с заглавной без пробелов). Другими словами, для свойства стиля JavaScript вместо text-align нужно использовать textAlign.
// Make div into a circle and vertically center the text
div.style.borderRadius = ‘50%’;
div.style.display = ‘flex’;
div.style.justifyContent = ‘center’;
div.style.alignItems = ‘center’;
После вышеупомянутых изменений стиля ваш окончательный рендеринг styles.html покажет круг.
Если к элементу нужно применить много стилистических изменений, лучше применить стиль к классу и добавить новый класс.
Заключение
HTML-элементы часто содержат дополнительную информацию, присваиваемую им в виде атрибутов. Атрибуты могут состоять из пар имя/значение. Некоторые из наиболее распространенных атрибутов – это class и style.
В этом мануале вы узнали, как обращаться, изменять и удалять атрибуты в HTML-элементе в DOM, используя простой JavaScript. Вы также научились добавлять, удалять, переключаться и заменять классы CSS элементами и редактировать встроенные стили CSS. Чтобы узнать больше, ознакомьтесь с документацией по атрибутам в Mozilla Developer Network.