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

Добавляем класс в тег javascript

1. Добавим класс с помощью
2. Добавить класс при загрузке страницы js-
3. Добавить класс тегу при клике на другой тег js()
4. Добавление класса элементу при клике на себя js()
5. Как добавить класс при наведении мышки javascript()
6. Как добавить сразу несколько классов при клике javascript
7. Скачать

Добавим класс с помощью

Начнем с добавления/создания атрибута - для этого вам понадобится:

Какой-то из тегов - пусть это будет div

<div id="add_class_in_div">Добавление класса в тег div</div>

Чтобы не быть скучным... будем добавлять класс по нажатию на кнопку button

Добавим onclick :

Для того, чтобы добавить класс надо одним из способов обратиться к тегу, если это id, то сделать это можно написав значение атрибута "id", далее... + "точка" добавляем "свойство/метод с помощью которого будем добавлять класс" + "равно(=)" и название класса, который будем создавать/добавлять

add_class_in_div . className = 'example_class'

Кнопка полностью в сборе:

<button onclick="add_class_in_div . className = 'example_class'">Добавь класс с помощью кнопки</button>

Css

Нам нужны стили добавляемого класса, чтобы мы могли увидеть, что класс добавлен!

<style>.example_class {
border: 1px solid;
padding: 10px;
margin: 20px;
}</style>

Соберем весь код:

Код добавления класса с помощью кнопки:

Выведем весь код описанный выше:

HTml:

<div id="add_class_in_div">Добавление класса в тег div</div>

<button onclick="add_class_in_div . className = 'example_class'">Добавь класс с помощью кнопки</button>

Css

<style>.example_class {

border: 1px solid;

padding: 10px;

margin: 20px;

}</style>

Пример работы кода добавления класса с помощью кнопки:

Весь код поместим прямо здесь!

Чтобы добавить класс нажмите кнопку "Добавь класс с помощью кнопки":

Добавление класса в тег div
Добавь класс с помощью кнопки



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

Добавим класс при загрузке страницы с помощью .

Для этого вам понадобится:

Чтобы класс добавлялся при загрузке, вам нужен тег, пусть это опять будет div + добавим ему "id"

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

Чтобы увидеть добавление класса, нам нужен новый класс.. и добавим ему стилей с цветом:

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

Далее вам потребуется тег script в нем повторяем все тоже самое, что и в первом пункте, только заменяем на

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

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

<style>.add_new_class{ color: blue;}</style>
<div id ="first">Добавление класса при загрузке страницы</div>
<script>first. classList . add('add_new_class');</script>

Соберем весь код:

Код добавления класса при загрузке:

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

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

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

Пример добавления класса при загрузке:

Далее... разместим выше приведенный код "добавления класса при загрузке"

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



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

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

Два div с id

<div id ="id_1">Просто текст...</div>

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

Javascript

Тег script + onclick + в функции добавляем класс первому тегу:

id_1. classList . add('first_class');

Чтобы вы могли увидеть действие добавления класса пропишем стили для нового класса :

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

Соберем весь код:

Код добавления класса при клике на другой тег js

Html:

<div id ="id_1">Просто текст...</div>

<div id ="example_id" class="width_100 border">Добавь класс при клике по другому тегу </div>

Javascript

<div id ="id_1">Просто текст...</div>

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

<script>example_id . onclick = function() { id_1. classList . add('first_class');}</script>

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

Css:

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

Пример работы кода добавления класса при клике на другой тег js

Далее разместим выше приведенный код прямо здесь:

Просто текст...
Добавь класс при клике по другому тегу



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

Как "добавить класс при клике на себя в javascript"!? Для выполнения поставленной задачи - вам понадобится:

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

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

Далее нам потребуется тег с id, в который обернем весь данный пункт(вначале сделал на всю страницу, но поскольку страница о добавлении классов, то становится немного непонятно, что происходит...) :

<span id="example_span"></span>

+ onclick + function с произвольным аргументом внутри(просто буква "е")

example_span.onclick = function(e)

В функцию помещаем "e" + target + и название добавляемого класса:

e . target . classList . add('new_class');

Соберем весь код вместе:

Код добавления класса элементу при клике на себя js

<style>.new_class{ color: #9900fc;}</style>

<script>example_span.onclick = function(e) { e . target . classList . add('new_class');}</script>

Пример добавления класса элементу при клике на себя js

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

И теперь... нажмите по любой части текста в данном пункте, исключая ссылки(вы просто перейдете на другую страницу)




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

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

Добавляемы классы, один красный, другой оранжевый:

<style>.red{color:red}.orange{color: orange}</style>

Один из классов добавим тегу:

<div id="my_id" class="red">Здесь текст</div

Добавим: mouseover при наезде мышкой добавим оранжевый(orange)

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

{

e.target. className = "orange";

});

Если мышка покидает тег mouseout добавляем на место класс red

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

{

e.target. className = "red";

});

Соберем весь код:

Код добавления класса при наведении мышки:

Html:

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

Css:

<style>.red{color:red}.orange{color: orange}</style>

Javascript

<script>

window.onload = function()

{

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

{

e.target. className = "orange";

});

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

{

e.target. className = "red";

});

}

</script>

Пример работы кода добавления класса при наведении мышки:

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

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



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

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

Стили сразу двух классов add_class_1 и add_class_2 - видим, что стили отличаются от основного текста!

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

Опять кнопка, + id

<button id ="add_several_class">Добавь сразу несколько классов</button>

И javascript

Используем и внутри скобок прописываем столько классов, сколько вы хотите добавить тегу...

<script>add_several_class . onclick = function() { its_id. classList . add('add_class_1' , 'add_class_2' );}</script>

Соберем весь код:

Код добавления сразу нескольких классов:

Html:

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

Css:

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

Javascript

<script>add_several_class . onclick = function() { its_id. classList . add('add_class_1' , 'add_class_2' );}</script>

Пример добавления сразу нескольких классов:

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