Page 123 - 6108

За допомогою властивості className можна встановити атрибут class
елемента html. Завдяки використанню класів не доведеться налаштовувати
кожну окрему властивість css за допомогою властивості style.

body.className = "blueStyle";
Але при цьому треба враховувати, що колишнє значення атрибута class
видаляється. Тому, якщо нам треба додати клас, треба об'єднати його назву зі
старим класом:

body.className = body.className + "blueStyle";

І якщо треба зовсім видалити всі класи, то можна привласнити властивості
порожній рядок:
body.className = "";

Для управління множиною класів набагато зручніше використовувати
властивість classList. Це властивість представляє об'єкт, який реалізує
наступні методи:
– add (className) – додає клас className
– remove (className) – видаляє клас className
– toggle (className) – перемикає у елемента клас на className.
Якщо класу немає, то він додається, якщо є, то видаляється

let articleDiv = document.querySelector("div.article");
articleDiv.classList.remove("article"); // видаляємо клас
articleDiv.classList.add("blueStyle"); // додаємо клас
articleDiv.classList.toggle("article"); // переключаємо клас

Повний стиль з getComputedStyle
Отже, властивість style дає доступ тільки до тієї інформації, яка
зберігається в elem.style. Їй невідомо про відступ, якщо він з'явився в
результаті накладення CSS або вбудованих стилів браузера.
Для того, щоб отримати поточне значення властивості використовується
метод window.getComputedStyle(), описаний в стандарті DOM Level 2.

getComputedStyle (element [, pseudo])
element – елемент, значення для якого потрібно отримати

pseudo – вказується, якщо потрібен стиль псевдо-елемента, наприклад
":: before". Порожній рядок або відсутність аргументу означає сам елемент.
В CSS є дві концепції визначення значень стильових властивостей
елемента:
1. Обчислення (computed) значення – це те, яке отримано після
застосування всіх правил CSS і CSS-успадкування. Наприклад, width: auto
або font-size: 125%.
2. Остаточне (resolved) значення – безпосередньо застосовується до
елементу. При цьому всі розміри наводяться до пікселів, наприклад width:
212px або font-size: 16px. У деяких браузерах пікселі можуть бути
дробовими.
Спочатку метод getComputedStyle() замислювалося для повернення

обчисленого значення, але з часом виявилося, що остаточне набагато зручніше.