Как добавить класс в javascript способы, примеры

Поддержи проект!!!

Добавить класс в js, есть ли функция в javascript, которая добавляет класс к элементу, скрипт добавить класс по клику! Будем добавлять класс элементу с помощью : classList . add, и еще есть метод - setAttribute, с помощью которого тоже можно добавить класс элементу.
Навигация по странице :

1. Что такое -> elem . classList . add()
2. Добавление класса при загрузке страницы javascript
3. Добавление класса элементу при клике на него javascript
4. Добавление класса элементу при клике на другой элемент javascript
5. Как добавить класс при наведении мышки javascript
6. Как добавить сразу несколько классов при клике javascript
7. Добавить класс по атрибуту js

Тоже самое, но с использованием другого метода:

8. Добавление класса с помощью -> elem . setAttribute()
9. Добавление класса javascript при загрузке с помощью setAttribute
10. Добавление класса элементу при клике на него javascript с помощью setAttribute
11. Добавление нескольких классов с помощью setAttribute
12. Скачать можно здесь

Что такое classList . add

1). classList - это свойство, которое возвращает псевдо массив DOMTokenList, содержащий все классы элемента.
2). add() - это метод, который добавляет новый элемент с заданным значением в конец объекта Set.


О каждом из них мы поговорим возможно как-нибудь в следующий раз! Нас сегодня интересует, их сочетание!

Конкретно в таком сочетании и можно добавлять новый класс элементу.

elem . classList . add();

Добавление класса при загрузке страницы javascript

1). Чтобы класс добавлялся при загрузке, нам понадобится для эксперимента какой-то блок:

<div id ="first">Добавление класса при загрузке страницы</div>
2). нам понадобится какой-то класс, который не существует в нашей системе, чтобы все было честно!

<style>.theFirst{ color: blue;}</style>
3). И далее нам нужно в скрипте добавить к существующему ид(first) новый класс(theFirst)

<script>first. classList . add('theFirst');</script>

Соберем все вместе:

<style>.theFirst{ color: blue;}</style>

<div id ="first">Добавление класса при загрузке страницы</div>

<script>first. classList . add('theFirst');</script>

И результат:

Добавление класса при загрузке страницы

Добавление класса элементу при клике него javascript

Как добавить класс при клике в javascript!?

для иллюстрации возможности добавлять класс элементу, нам потребуется из предыдущей темы: "добавление класса при загрузке" все три пункта, чтобы не мудрить добавим к классу и ид единицу!
4). Нам понадобится 4 пункт. Он и будет добавлять класс при клике! На ид(first1) повесим onclick, в случае нажатия по строке с нашим ид, выполнится добавление класса при клике:

<script>first1 . onclick = function( ) { first1. classList . add('theFirst1');}</script>

Весь код добавления класса элементу по клику :

<style>.theFirst1{ color: blue;}</style>

<div id ="first1">Добавление класса при клике по элементу</div>

<script>first1 . onclick = function( ) { first1. classList . add('theFirst1');}</script>

Результат:

Нажмите по строке и класс добавится элементу. по которому вы нажали!

Добавление класса при клике по элементу

Добавление класса элементу при клике на другой элемент javascript

Для того, чтобы продемонстрировать озвученный заголовок : Добавление класса элементу при клике на другой элемент javascript

Нам понадобится весь скрипт из предыдущего пункта, опять изменим стиль и ид

5). И тут нам понадобится пункт номер 5! В этом пункте мы добавим кнопку, у которой будет уникальный ид butId и на этот ид повесим onclick :

<button id ="butId">Нажми на меня</button>

Скрипт в сборе:

<style>.theFirst2{ color: blue;}</style>

<div id ="first2">Добавление класса при клике по другому элементу</div>

<button id ="butId">Нажми на меня</button>

<script>butId . onclick = function( ) { first2. classList . add('theFirst2');}</script>

Результат:

Добавление класса при клике по другому элементу
Нажми на меня

Как добавить класс при наведении мышки javascript

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

<red id="my_id">Текст будет меняться с помощью добавления класса с помощью javascript при наведении мышки</red>
Далее нам понадобится... добавим window.onload, чтобы скрипт работал, хоть сверху, хоть снизу! Далее напишем конструкцию с использованием mouseover - т.е. когда у вас мышка попала на объект. И противоположное действие mouseout, внутри функции iss и isz - произвольный набор букв!


Сразу весь код вместе:

<red id="my_id">Текст будет меняться с помощью добавления класса с помощью javascript при наведении мышки</red>

<script>

window.onload = function()

{

   my_id.addEventListener("mouseover", function(iss)

   {

   iss.target.style.color = "orange";

   });

   my_id.addEventListener("mouseout", function(isz)

   {

   isz.target.removeAttribute("style");

   });

}

</script>

Результат работы скрипта, который добавляет класс объекту при наведении мышки на объект

Текст будет меняться с помощью добавления класса с помощью javascript при наведении мышки

Как добавить сразу несколько классов при клике javascript

Опять повторяем как и раньше! Для того, чтобы добавить несколько классов элементу, нам понадобится предыдущий скрип!

Нам нужен второй класс, который мы будем добавлять элементу, путь будет размер шрифта:

.bigg{ font-size: 26px; }
В скрипте в методе add через запятую, добавляем столько стилей, сколько вам нужно:

<script>butId_1 . onclick = function( ) { first3. classList . add('theFirst3' , 'bigg' );}</script>

Скрипт добавления сразу несколько стилей другому элементу через javascript:

<style>.theFirst3{ color: blue;} .bigg{ font-size: 20px; }</style>

<div id ="first3">Добавление нескольких классов при клике по другому элементу</div>

<button id ="butId_1">Нажми на меня</button>

<script>butId_1 . onclick = function( ) { first3. classList . add('theFirst3' , 'bigg' );}</script>

Результат:

Добавление нескольких классов при клике по другому элементу
Нажми на меня

Добавить класс по атрибуту js

Добавить класс или проделать любые другие операции можно, если только мы смогли обратиться к тегу, и как из ссылки видно, то можно обратиться к любому атрибуту тега! И даже к самому тегу! Весь контент на данной странице был написан с обращением к атрибуту id, почему!? Просто потому, что с этим атрибутом работать легче всего!

Добавление класса с помощью elem . setAttribute()

1). С помощью данного метода можно также добавлять класс к элементу.
2). В первом значении(name_attribute) - ставится название атрибута, во втором значение название атрибута.

elem . setAttribute("name_attribute","value_attribute")
Поскольку мы добавляем класс к элементу, то наш метод будет выглядеть так: в названии это будет class, во втором значении будет название класса:

elem . setAttribute("class","value_class")

Добавление класса javascript при загрузке с помощью setAttribute

Опять нам потребуется класс(second), который будем добавлять, давайте что-то изменим... здесь сделаем цвет зеленый(green), элемент - див, у которого есть ид(id_second) и скрипт, который добавит класс при загрузке с помощью setAttribute:

Весь код в сборе:

<style>.second{ color: green;}</style>

<div id ="id_second">Добавление класса javascript при загрузке с помощью setAttribute</div>

<script>id_second . setAttribute("class", "second");</script>

Результат:

Добавление класса javascript при загрузке с помощью setAttribute

Добавление класса элементу при клике на него javascript с помощью setAttribute

Добавление класс аналогично пункту, только изменим classList . add на setAttribute

<style>.second_1{ color: green;}</style>

<div id ="id_second_1">Добавление класса при клике по элементу с помощью setAttribute</div>

<script>id_second_1 . onclick = function( ) { id_second_1. setAttribute("class", "second") ;}</script>

Результат:

Нажмите по строке...

Добавление класса при клике по элементу с помощью setAttribute

Добавление нескольких классов с помощью setAttribute

Добавим сразу три класса по нажатию, 1) это будет цвет (green), 2) это будет размер(font-size : 20px;) и 3) бордюр(border)

<style>.second{ color: green;} .second2{ font-size : 20px;} .second3{ border: 1px solid #a7a7a7;}</style>

<div id ="id_second22">Добавление несколько классов javascript с помощью setAttribute</div>

<button id ="id_button">Нажми на меня</button>

<script>id_button . onclick = function( ) {id_second22 . setAttribute("class", "second second2 second3");}</script>

Результат:

Добавление несколько классов javascript с помощью setAttribute
Нажми на меня

---

Вас может еще заинтересовать список тем : #JS | #JS_CLASS |

---

Теги:
js добавить класс js добавить класс элементу js добавить класс по клику добавить класс через js vue js добавить класс js добавить класс при клике добавить класс при скролле js js создать класс вставить класс jsjavascript присвоить классjavascript add class