Как добавить класс в javascript способы, примеры
- Что такое ->
elem . classList . add() - Добавление класса при загрузке страницы javascript
- Добавление класса элементу при клике на
него javascript - Добавление класса элементу при клике на
другой элемент javascript - Как добавить класс при наведении мышки javascript
- Как добавить сразу
несколько классов при клике javascript - Добавить класс по атрибуту js
- Добавление класса с помощью ->
elem . setAttribute() - Добавление класса javascript при загрузке с помощью setAttribute
- Добавление класса элементу при клике на
него javascript с помощью setAttribute - Добавление нескольких классов с помощью setAttribute
- Скачать можно здесь
Тоже самое, но с использованием другого метода:
Что такое classList . add
О каждом из них мы поговорим возможно как-нибудь в следующий раз! Нас сегодня интересует, их сочетание!
Конкретно в таком сочетании и можно добавлять новый класс элементу.
Добавление класса при загрузке страницы javascript
Соберем все вместе:
<style>.theFirst{ color: blue;}</style>
<div id ="first">Добавление класса при загрузке страницы</div>
<script>first. classList . add('theFirst');</script>
И результат:
Добавление класса элементу при клике него javascript
Как добавить класс при клике в javascript!?
для иллюстрации возможности добавлять класс элементу, нам потребуется из предыдущей темы: "добавление класса при загрузке" все три пункта, чтобы не мудрить добавим к классу и ид единицу!Весь код добавления класса элементу по клику :
<style>.theFirst1{ color: blue;}</style>
<div id ="first1">Добавление класса при клике по элементу</div>
<script>first1 . onclick = function( ) { first1. classList . add('theFirst1');}</script>
Результат:
Нажмите по строке и класс добавится элементу. по которому вы нажали!
Добавление класса элементу при клике на другой элемент javascript
Для того, чтобы продемонстрировать озвученный заголовок : Добавление класса элементу при клике на другой элемент javascriptНам понадобится весь скрипт из предыдущего пункта, опять изменим стиль и ид
Скрипт в сборе:
<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>
<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:
<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()
Добавление класса 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
Добавление класс аналогично пункту, только изменим 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
Добавим сразу три класса по нажатию, 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>
Результат:
js добавить класс js добавить класс элементу js добавить класс по клику добавить класс через js vue js добавить класс js добавить класс при клике добавить класс при скролле js js создать класс вставить класс js javascript присвоить класс javascript add class