В этом руководстве объясняется процедура добавления активного класса в JavaScript.
Как добавить активный класс в JavaScript?
Чтобы добавить активный класс, мы будем использовать следующие методы:
Переходим к первому способу!
Метод 1: используйте document.getElementById() с методом classList.add() для добавления активного класса в JavaScript
В JavaScript « документ.getElementById() ” используется для доступа к определенному элементу по его идентификатору. Однако он выбирает элементы только на основе их идентификаторов, а не классов. Вы можете использовать его с « список классов.добавить() ” для добавления активного класса в JavaScript.
Давайте рассмотрим этот метод на примере.
Пример
В нашем HTML-файле мы возьмем « » с каким-то текстом, укажите его id как « текст ', и добавьте ' по щелчку », которое вызовет « активировать() функция. Обратите внимание, что добавьте тег
в тег
: < идентификатор p знак равно 'текст' по щелчку знак равно 'активировать()' > Нажмите здесь п >В файле JavaScript определите функцию активации() таким образом, чтобы она сначала обращалась к элементу абзаца, используя его идентификатор в методе document.getElementbyId(). Затем добавьте класс CSS в его список классов для стилизации:
активировать функцию ( ) {
Eсть знак равно документ. получитьэлементбиид ( 'текст' ) ;
а. список классов . добавлять ( 'новый класс' ) ;
}
В файле CSS поставьте точку перед « новый класс » и присвоить « фоновый цвет 'свойство значение' апельсин ”:
. новый класс {фон - цвет : апельсин ;
}
В результате, когда вы нажмете на элемент абзаца, к нему будет применено добавленное свойство фона:
Давайте посмотрим на следующий метод, в котором мы будем использовать document.querySelector() для добавления активного класса.
Способ 2: используйте document.querySelector() с методом classList.add() для добавления активного класса в JavaScript
В JavaScript « документ.querySelector() ” используется для получения первого элемента кода. Вы можете указать классы и идентификаторы как в методе querySelector(). Его можно использовать с « список классов.добавить() ” для добавления активного класса в JavaScript.
Пример
Теперь мы будем использовать только « документ.querySelector() 'с идентификатором' #текст », чтобы выбрать элемент абзаца. Опять же, метод classList.add() будет использоваться для добавления активного « новый класс ”:
активировать функцию ( ) {Eсть знак равно документ. селектор запросов ( '#текст' ) ;
а. список классов . добавлять ( 'новый класс' ) ;
}
Выход
Мы изучили два простейших метода добавления активного класса в JavaScript.
Вывод
Чтобы добавить активный класс, мы можем использовать « получитьэлемент по идентификатору() ' или же ' селектор запросов() ” с помощью метода classList.add(). Оба упомянутых метода сначала получают элементы по их идентификатору, а затем, используя метод classList.add(), новое имя класса, присвоенное элементу, которое можно использовать для целей стилизации. В этом посте описана процедура, связанная с добавлением активного класса в JavaScript.