Ноу Інти, лекція, динамічний стиль - управління css за допомогою javascript

• Доступ до таблиць стилів
• Властивості таблиць стилів
• Додавання і видалення правил
• Зміна стилів елементів
• Імена класів елементів
• висновок
• Контрольні питання

Доступ до таблиць стилів

Можна також додавати на сторінку нові таблиці стилів - ви можете використовувати функцію document.createElement для створення нових елементів style. Це буде корисно, коли ви хочете надати відвідувачам сайту можливість динамічно змінювати стилі сайту, використовуючи, можливо, деякі керуючі кнопки. Ось невеликий приклад, як можна створити нову таблицю стилів:

Видалення таблиці стилів також виконується дуже просто. Спочатку необхідно отримати таблицю стилів. яку ви хочете видалити. Це можна зробити, використовуючи document.getElementById. як показано в невеликому прикладі нижче. Щоб видалити таблицю стилів. можна використовувати функцію DOM parent.removeChild (element). де element є об'єктом таблиці стилів. яку необхідно видалити, а parent є вузлом предком таблиці стилів. Як показано в прикладі нижче, щоб видалити таблицю стилів (sheetToBeRemoved), ви спочатку отримуєте предка таблиці стилів - var sheetParent = sheetToBeRemoved.parentNode - а потім викликаєте removeChild з аргументом sheetToBeRemoved - sheetParent.removeChild (sheetToBeRemoved)

Властивості таблиць стилів

Більшість властивостей об'єкта stylesheet призначені тільки для читання, але деякі, такі як disabled. можна змінювати.

Для кожного об'єкта stylesheet. витягнутого з масиву styleSheets. можна отримати доступ до його властивості title. щоб перевірити, що воно містить заголовок, який потрібно знайти. Чинний приклад цього можна бачити в прикладі по додаванню і видалення правил. який розглядається в наступному розділі.

Додавання і видалення правил

Об'єкт stylesheet має дві функції, які допомагають вирішити цю проблему. Першою є функція insertRule. яка виглядає наступним чином:

де rule буде рядком, що містить правило. яке ми хочемо додати в таблицю стилів. index визначає, де в списку правил таблиці стилів повинно міститися це правило. Ось як це може виглядати.

Якщо потрібно видалити це правило. можна викликати функцію stylesheet.deleteRule (index). де index буде індексом правила. яке буде видалено.

Примітка. IE не реалізує правила відповідно до стандартів. Замість атрибута cssRules він використовує rules. IE використовує також removeRule замість deleteRule і addRule (selector. Rule, index) замість insertRule.

Зміна стилів елементів

Об'єкт style має атрибути, які відповідають різним заданим властивостям CSS. Наприклад, style.color повертає заданий на елементі колір. Виконуючи element.style.color = "red"; можна динамічно змінювати стиль. Нижче показана функція. яка перетворює колір елемента в червоний, коли їй передається id елемента.

Можна також використовувати setAttribute (key, value) для завдання стилю елемента. Наприклад, задати колір елемента як червоний, викликаючи на елементі element.setAttribute ( 'style', 'color: red') ;. але будьте обережні, тому що це видаляє будь-які зміни, зроблені в об'єкті style.

Пам'ятайте об'єкти таблиць стилів. Властивість styleSheet.cssRules повертає список об'єктів style. які представляють усі правила CSS. містяться в таблиці стилів. Ці об'єкти style можна використовувати також, як об'єкти style для інших елементів. У цьому випадку замість зміни одного певного елемента на сторінці, зміни тут будуть змінювати всі елементи, до яких застосовуються правила CSS.

Імена класів елементів

висновок

Контрольні питання

• в чому відмінність між setAttribute і завданням стилю через об'єкт CSSStyleDeclaration?
• Вкажіть два способи, за допомогою яких можна у всіх зображень виводити зелений кордон, коли користувач клацає на кнопці.
• Чи буде зміна об'єкта CSSStyleDeclaration елемента завжди змінювати стиль елемента? Чому?
• Вкажіть два способи доступу до певної таблиці стилів.