Є два способи змінювати стиль елемента за допомогою JavaScript. Перший - це встановлення властивості CSS безпосередньо у елементі. Другий - додавання або видалення значень класу з елемента, що може призводити до застосування або ігнорування певних правил стилю.
Кожен HTML-елемент, до якого ви звертаєтеся через JavaScript, має об'єкт style. Цей об'єкт дозволяє визначати властивість CSS та встановлювати його значення. Наприклад, ось як виглядатиме установка фонового кольору HTML-елемента зі значенням id - super:
let myElement = document.querySelector("#super");
myElement.style.backgroundColor = "#D93600";
Щоб впливати на кілька елементів, ви можете зробити наступне:
let myElements = document.querySelectorAll(".bar");
for (let i = 0; i < myElements.length; i++) {
myElements[i].style.opacity = 0;
}
Тобто, для прямої стилізації елементів за допомогою JavaScript першим кроком буде звернення до елемента.
Другим кроком буде знаходження властивості CSS, що вас цікавить, і вказівка ??для його значення. Пам'ятайте, що багато значень у CSS є рядками. Також пам'ятайте, що багатьом значенням для розпізнавання потрібні одиниці виміру на зразок px, em або аналогічні.
Властивості об'єкта style дозволяє змінити стиль будь-якого елемента Web-сторінки, просто надавши потрібному властивості необхідне значення.
Всі властивості є строковими константами, тому їх значення необхідно брати в лапки.
Існує чітка відповідність між властивостями стилю CSS та властивостями об'єкта style у JavaScript.
Властивості об'єкта style у JavaScript мають майже такі ж імена що і в CSS за тим винятком, що символи "-" забираються, а перші літери всіх слів, що утворюють ім'я атрибута, крім першого, робляться великими. У наступній таблиці показано приклади перетворення імен атрибутів стилю на імена властивостей об'єкта style, що встановлюють стиль елемента.
Крім того, деякі слова JavaScript зарезервовані і не можуть бути використані як є. Один із прикладів властивостей CSS, що підпадають під цю категорію є float. У CSS це властивість макету. У JavaScript воно позначає щось інше. Щоб використовувати властивість, чиє ім'я зарезервовано, використовуйте для нього префікс css, тобто напишіть не float, а cssfloat.
| css | JavaScript |
|---|---|
background-attachment | backgroundAttachment |
font-family | fontFamily |
z-index | zIndex |
API classList робить додавання та видалення значень класів з елемента до смішного легким. Він надає набір методів, які спрощують роботу зі значеннями класів:
Щоб додати значення класу елементу, отримайте посилання на цей елемент і викличте для нього метод add через classList:
let divElement = document.querySelector("#myDiv");
divElement.classList.add("bar");
divElement.classList.add("foo");
divElement.classList.add("zorb");
divElement.classList.add("baz");
console.log(divElement.classList);
Після виконання цього коду елемент div матиме наступні значення класу: bar, foo, zorb, baz. API classList перебирає додавання прогалин між значеннями класів. Якщо ж ми вкажемо неприпустиме значення класу, API classList лаятиметься і додавати його не стане. Якщо ми накажемо методу add додати клас, що вже існує в елементі, код, як і раніше, буде виконуватися, але значення класу, що повторюється, додане не буде.
Для видалення значення класу ми можемо викликати метод remove також через classList:
let divElement = document.querySelector("#myDiv");
divElement.classList.remove("foo");
console.log(divElement.classList);
Після виконання цього коду значення класу foo буде видалено та залишаться тільки bar, baz та zorb.
Для багатьох сценаріїв стилізації застосовується стандартний робітник процес. По-перше, ми перевіряємо, чи існує значення класу елемент. Якщо так, ми вилучаємо його з елемента. Якщо ж ні, то ми, навпаки, його додаємо. Щоб спростити цей тривіальний шаблон перемикання, API classList надає метод toggle:
let divElement = document.querySelector("#myDiv");
divElement.classList.toggle("foo"); // видаляє foo
divElement.classList.toggle("foo"); // додає foo
divElement.classList.toggle("foo"); // видаляє foo
console.log(divElement.classList);
Метод toggle при кожному виклику додає зазначене значення класу елемент або видаляє його. У нашому випадку клас foo при першому виклику методу toggle видаляється. Вдруге клас foo, навпаки, додається. Втретє знову видаляється.
Отже, тепер у вас є два відмінних на основі JavaScript підходу для стилізації елементів. Якщо є можливість модифікувати CSS, рекомендую стилізувати елементи за допомогою додавання та видалення класів. Причина пов'язана з тим, що такий підхід суттєво спрощує обслуговування коду. Набагато легше додавати або видаляти властивості стилів з правила стилю в CSS, ніж додавати та видаляти рядки коду JavaScript.
За натисканням кнопки будемо змінювати колір літери та напис на кнопці.
На сторінці картинка з розмірами 200 на 200 та кнопка з написом "Портрет у рамці". При натисканні на кнопку розмір зображення збільшується і стає 400 на 400, крім того з'являється товста рамка, напис на кнопці змінюється на "Початковий розмір". При повторному натисканні повертається початковий розмір і зникає рамка, напис на кнопці змінюється на "Портрет у рамці".
Для того, щоб кнопка не змінювала свого розташування, коли розмір картинки зменшується, і картинка та кнопка поміщені в комірки таблиці, для яких задано розмір.
Властивість display визначає спосіб відображення елемента на сторінці. Деякі значення:
За натисканням кнопки зображення з'явиться і зникне. Для цього будемо скористатися властивістю display об'єкта style.
