Іноді, щоб розпочати подорож, вивчаючи щось величезне і складне, потрібно навчитися чомусь маленькому і простому. JavaScript величезний і складний, але ви можете вступити в нього, вивчивши дрібні та прості речі. Якщо ви веб-дизайнер, я думаю, є одна річ, про яку ви можете навчитися, що надзвичайно розширює можливості.
Це те, про що я хочу, щоб ви навчилися: коли ви натискаєте якийсь елемент, змініть клас на якийсь елемент.
Зводячи це до найнеобхіднішого, уявіть, що у нас є кнопка та div:
Click Me I'm an element У div може бути кілька базових стилів, і він може мати деякі стилі, коли має певний клас:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Проникливі CSS-обманщики можуть визнати це можливістю зламати прапорець, але над цим ми сьогодні не працюємо.
Ми хочемо прикріпити до кнопки «прослуховувач подій»: трохи коду, який потрібно «прослухати», у нашому випадку, натисніть події, а коли це станеться, запустіть більше коду.
Ви знаєте, як у CSS нам потрібно «вибирати» елементи, щоб їх стилізувати? Це потрібно зробити і в JavaScript, щоб приєднати наш прослуховувач подій. Ми створимо "посилання" на кнопку як змінну, наприклад:
var button = document.querySelector("button");Тепер, коли ми маємо посилання на кнопку, ми приєднаємо слухач цієї події:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));А що ми хочемо зробити у разі клацання? Додайте назву класу до нашого div! Але так само, як нам потрібна була посилання на кнопку, щоб щось робити з нею, нам також знадобиться посилання на div. Давайте зробимо їх обох одночасно, ось і весь біт коду:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Це все, що я хотів вам показати. Додавши до цього класу "yay" деякий CSS, ми можемо переходити до div:
Дивіться Pen Click Something / Change Class від Chris Coyier (@chriscoyier) на CodePen.
Чому це одне?
Можливості проектування нескінченні, коли ви керуєте CSS і станом будь-якого елемента (які імена класів він має). Приховування та розкриття речей - очевидна сила, але насправді це може бути що завгодно.
Вирівнювання вгору
Пам'ятайте, що ви не обмежуєтесь зміною однієї назви класу. Ви можете змінити кілька класів на одному елементі або змінити класи на декількох елементах.
Докладніше ознайомтесь із властивістю classList. “Перемкнути” - не єдиний варіант.
Як і HTML та CSS, JavaScript має різні рівні підтримки браузера для речей. Перегляньте підтримку браузера для classList та додайте addEventListener. Вам добре з такими рівнями підтримки вашого проекту? Якщо ні, ви можете розглянути поліфіли або навіть jQuery.
Ми використовували подію “клацніть”, але є безліч інших. Інші події миші, прокрутка, клавіатура тощо. Багато сотень.
Метод, який ми використовували для відбору, був document.querySelector. Це було корисно, оскільки повертає один елемент для роботи з нами. Плюс, селектори, які ви їм надаєте, подібні до селекторів CSS. document.querySelector("#overlay .modal > h2");було б законним вибором. Однак це не єдиний метод вибору, є й інші, такі як getElementById, querySelectorAll, getElementsByClassName та багато іншого.
Ось приклад того, як ми обираємо купу елементів навігації та прикріплюємо обробник клацань до всіх них одночасно:
Перегляньте класи заміни пера на Stuff від Chris Coyier (@chriscoyier) на CodePen.
Якщо JavaScript, який ми написали в нашому маленькому прикладі, не вдалося завантажити з будь-якої причини, у нас все одно залишиться кнопка з написом "Клацни на мене". Але натискання на нього не зробить біса, правда? Можливо, ми могли б вставити цю кнопку за допомогою JavaScript, тож цієї кнопки навіть немає, якщо ми не знаємо, що вона буде працювати? Хороша ідея, так? ;)