Объект CSSStyleDeclaration

Об’єкт CSSStyleDectaration, властивості і методи
При форматуванні елементів веб-сторінки за допомогою мови каскадних листів

стилів для забезпечення їх дизайну використовується набір властивостей CSS.
Сукупність таких властивостей CSS утворює колекцію, за якою відбувається
форматування елемента веб-сторінки. З цією колекцією зв’язаний об’єкт мови JavaScript
CSSStyleDeclaration. Цей об’єкт має властивості і методи, які розглядаються нижче.
Деякі властивості об’єкту CSSStyleDeclaration наведені в таблиці 1.
Таблиця 1
Властивість Описання
cssText Повертає у вигляді текстового рядка (літерала) правила
каскадних листів стилів використані у якості значення атрибуту
style тегів мови HTML. Повністю відповідає тексту правил CSS у
вигляді рядка без оточуючих рядок лапок. Не працює, якщо
правила CSS декларуються у окремому файлі (зв’язування за
допомогою тегу <link>), вбудовуються у HTML документ за
допомогою тегу < style></style> або імпортуються.
Встановлює форматування елементів веб-сторінки із функцій
скрипта на мові JavaScript. При завданні цієї властивості старі
значення всіх властивостей, що були використані для
форматування елемента веб-сторінки видаляються і замінюються
на нові.
length Повертає кількість властивостей (кількість елементів колекції
стилів) для веб-сторінки і її елементів, створених за допомогою
тегів мови HTML
1. Властивість cssText
Зазначимо, що властивість cssText за своєю дією повністю еквівалентна подібній
властивості об’єкту Style. Для отримання у скриптах інформації, стосовно правил CSS,
що були використані для форматування веб-сторінки в цілому можна використати
оператор, що має синтаксис:
var ім’я_змінної = document.body.style.cssText;.
Звернення до HTML документу в цілому відбувається через ім’я body. У цьому випадку
змінна, ім’я якої оголошене за допомогою оператора var, отримає значення у вигляді
рядка, що буде складатися із списку властивостей CSS і їх значень, що були
задекларовані за допомогою атрибуту style у тегу <body> HTML коду веб-сторінки.
Наприклад, тег <body> має вигляд
<body style=”background-color:#ddeeff”>,
тоді при виконанні у скрипті оператора
var rule=document.body.style.cssText;
змінна rule отримає значення у вигляді рядкового літералу “background-color: rgb(221,
238, 255);”. Зазначимо, що при завданні кольору для CSS правил у вигляді RGB коду, як
#rrggbb, він виводиться при використанні властивості cssText об’єкту
CSSStyleDeclaration у формі rgb(r,g,b) (тут r,g,b десяткові числа, що вказують, відповідно,
вклад червоного зеленого і синього кольорів у кольоровий відтінок, що задає RGB код).
Коли колір задається назвою на англійській мові, він виводиться, при використанні
властивості cssText у вигляді цієї назви.
Для отримання у скрипті інформації про правила CSS, що були використані для
форматування конкретного елементу веб-сторінки, оператор може мати один з наступних
синтаксисів:
var ім’я_змінної = складове_ім’я.style.cssText;
var ім’я_змінної = document.getElementById(“id-ім’я”).style.cssText;
var ім’я_змінної = document.getElementsByTagName(“ім’я тегу”)[i].style.cssText;
var ім’я_змінної = ім’я_посилальної змінної.style.cssText;.
Ім’я посилальної змінної може бути створено за допомогою методів
getElementById() і getElementsByTagName(), як це було розглянуто раніше для об’єктів
клієнта і об’єкту Style.
Наприклад, на веб-сторінці створено зображення за допомогою тегу
<img src=”EADLE.jpg” id=”r1” style=”width:300px;position:absolute;top:50mm;
left:100mm;border:groove 2mm yellow” onClick=”inf()”>,
а у скрипті, який викликається подією click на зображенні, виконується оператор
var infocss = document.getElementById(“r1”).style.cssText;.
У цьому випадку змінна infocss після виконання оператора присвоювання прийме
значення рядкового літералу =” width:300px;position:absolute;top:50mm;left:100mm;
border:groove 2mm yellow”.
Властивість cssText об’єкту CSSStyleDeclaration надає можливість програмним
шляхом змінювати дизайн елементів веб-сторінки, якщо цій властивості, прив’язаної до
конкретного елементу сторінки, присвоїти стрічку з правилами CSS, тобто виконати
оператор присвоювання з синтаксисом:
document.getElementById(“id-ім’я”).style.cssText = “правила CSS”;.
Тут для прив’язки до конкретного елементу веб-сторінки використано метод
getElementById().
Наприклад, на сторінці створено блок з написом «Объект CSSStyleDeclaration» за
допомогою тегу
<div id="d1" style="width:300px;hight:100px;border:solid 1mm" onClick="inf()"/>
Объект CSSStyleDeclaration
</div>
Як можна бачити, після завантаження сторінки до вікна браузера, блок буде
позиціонованим за замовченням у лівому верхньому куті вікна браузера. Він буде мати
розміри 300100 пікселів, рамку товщиною 1 мм, за замовченням чорного кольору.
Правила CSS, що до форматування напису в середині блоку у тегу style відсутні, тому
напис буде форматуватися за замовченням. Якщо при клацанні на блоці функція скрипта
inf(), що викликається цією подією, містить оператор присвоювання
document.getElementById("d1").style.cssText="width:800px;height:200px;
position:absolute;top:10px;right:10px;background:#ffeedd;font:italic 50px Arial;
text-align:center;color:red;border:groove 3mm blue";,
то зміст атрибуту style в тегу <div> зміниться на той, що представлено як значення
властивості cssText, яке присвоюється їй при виконанні цього оператора. Згідно
правилам CSS, що будуть передані властивості cssText дизайн блоку зміниться
наступним чином. Розміри блоку збільшаться до 800200 пікселів, кольоровий фон
блоку буде відповідати RGB коду :#ffeedd, навколо блоку з’явиться синя рамка
товщиною 3 мм стилю groove. Зміниться позиція блоку. Він буде позиціонований у
верхньому правому куті вікна браузера з відступами 10 пікселів відносно верхньої і
правої сторони вікна браузера. Текст у середині блоку буде вирівняний за його центром,
виведений шрифтом Arial курсивом з висотою букв 50 пікселів. Колір шрифту буде
червоним.
Таким чином, властивість cssText надає можливість не тільки отримувати у
скриптах інформацію про правила CSS, що були використані для форматування тих чи
інших елементів веб-сторінки, але дозволяє цілеспрямовано програмним шляхом
змінювати дизайн елементів веб-сторінки.
2. Властивість length
Повертає кількість властивостей правил CSS, що були використані для
форматування або усього документу(атрибут style в тегу <body>), або окремого елементу
веб-сторінки. Синтаксис використання такий самий, як для властивості cssText.
Наприклад, тег <body> документу має вигляд
<body style=”background-image:url(CAR.jpg); background-size:1000px”>,
тоді при виконанні у скрипті оператора
var x = document.body.style.length;,
змінна x отримає значення 2.
Якщо на веб-сторінці створено блок, що описується за допомогою тегу
<div id="d" style="width:300px;height:150px;background-color:yellow;
position:absolute;top:50mm;right:60mm" onClick="info1()"></div>,
то при виконанні оператору
var x = document.getElementById(“d”).style.length;,
змінна x отримає значення 6.
Більш докладніше розглянемо властивості об’єкту CSSStyleDeclaration на
наступному прикладі.
Приклад_1. Створити веб-сторінку, що має графічний фон, заданий за
допомогою файлу з URL адресою CAT.jpg. Зображення, що створює графічний фон
повинне покривати усе вікно браузера на моніторі з будь якою роздільною здатністю.
На сторінці у правому верхньому куті розташувати рисунок з URL адресою CAR.jpg, у
нижньому правому куті розташувати блок розмірами 500400 пікселів, обведений
подвійною рамкою товщиною 2 мм синього кольору. Блок повинен мати фон, заданий
кольором з RGB кодом #ffeedd. У нижньому лівому куті вікна браузера розташувати
багаторядкове текстове поле форми для виводу інформації. Поле повинне мати 10
рядків з 60 символами в рядку. При завантаженні сторінки у полі форми повинні
з’явитися правіла CSS, що були використані для форматування сторінки в цілому. При
наведенні курсору миші на блок і рисунок в полі форми повинні з’являтися правила CSS,
що були використані для форматування цих елементів. Для рисунку слід вивести також
інформацію про кількість властивостей, що були використані для його форматування.
При видаленні курсору миші з рисунку і блоку, багаторядкове поле форми повинно
очищуватися. При клацанні мишею на рисунку його форматування повинно змінитися.
Рисунок повинен переміститися у правий верхній кут вікна браузера, зменшити ширину
до 300 пікселів, повинна з’явитися рамка навколо рисунка стилю groove жовтого
кольору товщиною 2 мм.
Для створення сторінки згідно умові прикладу потрібні будуть властивості об’єкту
CSSStyleDeclaration cssText і length. Для управління функціями скрипта потрібні будуть
обробники подій onLoad, onMouseover, onMouseout і onClick. Оскільки правила CSS є
доступними для властивостей cssText і length, коли вони вбудовані у тег за допомогою
атрибуту style, окремий файл CSS можна не створювати. Тому робота веб-сторінки буде
забезпечуватися двома файлами з розширеннями .html і .js. Коди цих файлів наведені
нижче.
Файл «Prim1.html»
<html>
<head>
<script src="Prim1_JS.js"></script>
<title>Свойства объекта CssStyleDeclaration</title>
</head>
<body style="background-image:url(CAT.jpg);background-size:cover"
onLoad="bodprop()">
<div id="bl" style="width:500px;height:400px;background:#ffeedd;
border:double 2mm blue;position:absolute;bottom:10px;right:10px"
onMouseover="inf2()" onMouseout="document.getElementById('inform').value=''">
</div>
<img src="CAR.jpg" name="izo" style="position:absolute;top:20px;right:20px"
onMouseover="inf1()" onMouseout="document.getElementById('inform').value=''"
onClick="chn()">
<form>
<textarea rows="10" cols="60" id="inform" style="background:#ddeeff;font:7mm
Arial;color:#000060;position:absolute;bottom:10px;left:10px;border:solid 3px red"
onMouseover="inf3()" onMouseout="document.getElementById('inform').value=''">
</textarea>
</form>
</body>
</html>
Файл «Prim1_JS.js»
/*При завантаженні сторінки виводить у текстове поле форми інформацію
про CSS правила для форматування фону сторінки */
function bodprop(){
var bod=document.body.style.cssText;
bod="Правила CSS для веб-страницы: "+bod+".";
document.getElementById("inform").value=bod};
//Показує у текстовому поли форми правила CSS для форматування рисунка

function inf1(){
var in1=document.izo.style.cssText;
var l1=document.izo.style.length;
in1="Правила CSS для рисунка: "+in1+". Количество использованных свойств "
+l1+".";
document.getElementById("inform").value=in1};
//Показує у текстовому поли форми правила CSS для форматування блока

function inf2(){
var in2=document.getElementById("bl").style.cssText;
in2="Правила CSS для блока: "+in2+".";
/*Показує у текстовому поли форми правила CSS для форматування багаторядкового

текстового поля форми*/
function inf3(){
var in3=document.getElementById("inform").style.cssText;
in3="Правила CSS для поля формы: "+in3+".";
//Змінює дизайн рисунку

function chn(){
document.izo.style.cssText="width:400px;position:absolute;top:10px;left:10px;border-
style:groove;border-width:2mm;border-color:yellow"};
Як можна бачити з файлу Prim1_JS.js графічний фон створюється правилами CSS

“background-image:url(CAT.jpg);background-size:cover”, які складається із двох
властивостей. Властивість background-size із значенням cover забезпечує покриття
графічним зображенням усього вікна браузера. Форматування рисунку забезпечується
трьома правилами CSS “position:absolute;top:20px;right:20px”, які визначають його
позицію у вікні браузера. Дизайн блокового елементу забезпечують правила CSS:
“width:500px;height:400px;background:#ffeedd;border:double 2mm blue; position:absolute;
bottom:10px;right:10px”, а багаторядкового текстового поля форми правила CSS:
“background:#ddeeff;font:7mm Arial; color:#000060; position:absolute;bottom:10px;left:10px;
border:solid 3px red”. Завдяки цим правилам, сторінка має вигляд, показаний на рис. 1.
Рис. 1
При завантаженні сторінки обробник подій onLoad у тегу <body> запускає функцію
скрипта bodprop(), яка за допомогою властивості cssText вилучає правила CSS з атрибуту
style і присвоює їх змінній bod. Після доповнення стрічки правил літералом "Правила
CSS для веб-страницы: ", значення змінної bod, останнім оператором функції bodprop(),
присвоюється властивості value об’єкту textarea, тобто виводиться у багаторядкове поле
форми. Вигляд веб-сторінки додатку після завантаження до вікна браузера має вигляд,
показаний на рис. 2
рис. 2
При наведенні курсору миші на зображення обробник подій onMouseover запускає
функцію скрипта inf1(), яка за допомогою властивостей cssText і length вилучає правила
CSS, що були застосовані для форматування зображення і їх кількість. Ці значення
присвоюються змінним in1 і l1. Із значень цих змінних формується стрічка, яка
виводиться, як і у попередній функції, до багаторядкового текстового поля форма за
допомогою властивості value об’єкту textarea. Зазначимо, що для звернення у функції
inf1() до зображення використовується складове ім’я document.izo. Сторінка має вигляд,
показаний на рис. 3. Після видалення курсору миші з зображення обробник подій
onMouseout, за допомогою оператора document.getElementById('inform').value=''";,
очищує багаторядкове поля форми за рахунок присвоювання властивості value пустого
рядка. Сторінка приймає вигляд, показаний на рис. 1.
Подібним чином організовані функції скрипта inf2() і inf3(), які запускаються
обробником подій onMouseover при наведенні курсору миші, відповідно, на блок і
багаторядкове текстове поле форми. Ці функції використовують тільки властивість
cssText для вилучення правил каскадних листів стилів. Скриншоти веб-сторінки додатку,
що забезпечуються функціями inf2() і inf3() можна бачити на рис. 4 і рис. 5. Звернення до
блоку і поля форми у функціях inf2() і inf3() здійснюється з використанням id- імені за
допомогою метода getElementById().
При клацанні на зображенні обробник подій onClick у тегу <img> запускає
функцію скрипта chn(). Ця функція містить тільки один оператор присвоювання, який
присвоює, у вигляді строкового літералу, властивості cssText зображення правила CSS
“width:400px; position:absolute; top:10px; left:10px; border-style:groove; border-width:2mm;
border-color:yellow”. Звернення до зображення відбувається через складове ім’я
document.izo. Як наслідок значення атрибуту style у тегу <img> замінюється на наведене
вище і дизайн зображення змінюється так, як показано нарис. 6.
Рис. 3
Рис. 4
Рис. 5
рис. 6
3. Методи об’єкту CSSStyleDeclaration
Об’єкт CSSStyleDeclaration має методи, що тим чи іншим чином забезпечують

доступ у скриптах до властивостей каскадних листів стилів. Це дає можливість, як
отримувати інформацію про значення властивостей CSS, що використовуються у веб-
додатку, так і програмним шляхом встановлювати властивості з визначеними
значеннями, для елементів веб-сторінки, тобто виконувати зміну дизайну цих елементів
програмним шляхом. Деякі методи об’єкту CSSStyleDeclaration наведені у Табл. 2.
Таблиця 2
Метод Описання
Отримує значення властивості, що вказана, як
параметр методу. Отримує тільки значення
getPropertyValue(“властивість”)
властивостей, що декларуються в тегах HTML за
допомогою атрибуту style.
Отримує ім’я властивості, відповідно індексу в
колекції властивостей, декларованих в атрибуті style.
item(індекс)
Властивості в колекції мають значення індексу 0, 1, 2
… у порядку їх слідування.
setProperty(властивість,
Встановлює властивість CSS для виділеного елементу
значення, пріоритет)
Метод getPropertyValue()
Параметром методу є властивість CSS, значення якої метод повертає. Цей параметр
вказується, як строковий літерал у лапках. Метод розглянемо на наступному прикладі.
Нехай в коді веб-сторінки використовується тег, що створює зображення
<img src=" " id="fig1" style="width:300px; border: solid 1mm red"/>,
а у скрипті використовуються оператори присвоювання
var w=document.getElementById("fig1").style.getPropertyValue("width");
var bod=document.getElementById("fig1").style.getPropertyValue("border");.
У цьому випадку змінна w отримає значення у вигляді строкового літералу
"300px", а змінна bod значення ="solid 1mm red".
Метод item()
Параметром методу є значення індексу, який має властивість CSS, задекларована у
атрибуті style. Індекс відповідає порядковому номеру 0, 1, 2, … властивості у рядку
властивостей, вказаному як значення атрибуту style. Метод item() розглянемо на підставі
тегу <img>, представленого у попередньому прикладі. Якщо у скрипті використовуються
оператори
var prop1=document.getElementById("fig1").style.item(0);
var prop2=document.getElementById("fig1").style.item(1);
то змінна prop1 отримає значення строкового літералу "width", а змінна prop2 ‒ значення
"border-top-style".
Метод setProperty()
Має три параметра, які також задаються як строкові літерали. Перший параметр є
іменем властивості CSS, другий параметр визначає її значення, а третій параметр
пріоритет є не обов’язковим, замість нього може вказуватися пуста стрічка " ".
Метод setProperty() розглянемо на наступному прикладі.
Приклад_2. Створити динамічну веб-сторінку, що містить рисунок з URL
адресою CAR.jpg. При завантаженні сторінки рисунок повинен бути прихованим. Через
2 секунди після завантаження сторінки, рисунок повинен з’явитися у лівому верхньому
куті вікна браузера. Через 4 секунди після завантаження ширина рисунку повинна
зменшитися до 300 пікселів; через 6 секунд навколо рисунку повинна з’являється рамка
зеленого кольору шириною 2мм стилю groove; через 8 секунд рисунок переміщується у
нижній правий кут вікна браузера з відступами від сторін 10 пікселів; через 10 секунд
прозорість рисунку зменшується до значення 0.3 властивості CSS opacity. Через 12
секунд після завантаження рисунок приховується.
Для управління дизайном рисунку доцільно використати метод setProperty(), а для
забезпечення часової динаміки сторінки ‒ метод setTimeout() об’єкту widow. Оскільки
динаміка сторінки відбувається з моменту часу її завантаження, для запуску скрипта,
потрібен буде обробник подій onLoad. Програмні коди, що підтримують роботу
сторінки, наведені нижче.
<html>
<head>
<title>Метод setProperty()</title>
</head>
<body bgcolor="#ddeeff" onLoad="step1()">
<img src="CAR.jpg" name="im" style="visibility:hidden"/>
</body>
</html>
var T;//Оголошує глобальну змінну таймеру
//Через 2 секунді після завантаження веб-сторінки викликає функцію step2()
function step1(){
T=setTimeout("step2()",2000)};
//Робить рисунок видимим і через 2 секунди викликає функцію step3()
function step2(){
document.im.style.setProperty("visibility","visible","");
//Збільшує ширину рисунку до 300 пікселів і через 2 секунди викликає функцію step4()
function step3(){
document.im.style.setProperty("width","300px","");
//Створює рамку навкруг рисунку і через 2 секунди викликає функцію step5()
function step4(){
document.im.style.setProperty("border","2mm groove green","");
/*Позиціонує рисунок у нижньому правому куті вікна браузера і через 2 секунди викликає функцію
step6()*/
function step5(){
document.im.style.setProperty("position","absolute","");
document.im.style.setProperty("bottom","10px","");
document.im.style.setProperty("right","10px","");
//Змінює прозорість рисунку і через 2 секунди викликає функцію step7()*/
function step6(){
document.im.style.setProperty("opacity","0.3","")
T1=setTimeout("step7()",2000)};
//Приховує рисунок
function step7(){document.im.style.setProperty("visibility","hidden","")};
Як видно з файлу «Prim2.html», після завантаження сторінки рисунок, є
прихованим завдяки значенню "hidden" властивості visibility у атрибуті style тегу <img>.
Обробник подій onLoad тегу <body> викликає функцію step1(). Ця функція не змінює
дизайн веб-сторінки і викликає функцію step2() з затримкою 2 секунди. Рисунок на
протязі 2 секунд після завантаження зостається прихованим (рис. 7а). Функція step2(),
завдяки методу setProperty("visibility","visible",""), показує рисунок на протязі 2-х секунд
(рис. 7б) і викликає функцію step3(), яка завдяки методу setProperty("width","300px",""),
зменшує ширину рисунку до 300 пікселів (рис. 7в). Далі наступні функції з затримкою 2
секунди встановлюють новий дизайн рисунку за допомогою методу setProperty(). Воні
забезпечують динаміку дизайну сторінки показану на рис. 7г – рис. 7е.
а б
в г
д е
Рис. 7. Вигляд веб-сторінки додатку зразу після завантаження до вікна браузера (а) і
через інтервали часу після завантаження, с: 2-(б); 4-(в); 6-(г); 8-(д); 10-(е); 12-(а)
Метод getComputedStyle()
Для роботи у скриптах мови JavaScript з властивостями мови CSS можна

використовувати метод об’єкту window getComputedStyle(), який було уведено у
стандарті DOM Level 2.
Виконуючи обробку HTML сторінки браузер обчислює значення властивостей для
усіх її елементів і виходячи з результатів цих обчислень відображає елементи. Для того,
щоби отримати у скрипті будь яке поточне значення властивості CSS, що
використовується при форматуванні елементів веб-сторінки використовується метод
getComputedStyle(), який у загальному випадку має наступний синтаксис:
[window.] getComputedStyle(елемент[, псевдоелемент]),
де елемент ‒ елемент веб-сторінки для якого треба отримати значення властивості CSS.
Доступ до елементу, як було відмічено вище можна отримати через складове ім’я,
методи getElementById(), getElementsByTagName(), або за допомогою посилального
імені, створеного за допомогою означених вище методів. Псевдоелемент може бути
пустим рядком " ", null або, наприклад, стрічкою ":befor",":after".
Згідно стандарту DOM Level 2, метод getComputedStyle() об’єкту window повертає
об’єкт типу CSSStyleDeclaration, який є колекцією властивостей CSS з їх значеннями,
використаними на веб-сторінці для форматування елементів. За допомогою раніше
розглянутого методу getPropertyValue() об’єкту CSSStyleDeclaration можна отримати у
скрипті значення будь якої властивості CSS.
Розглянемо наступний приклад. На веб-сторінці створено рисунок за допомогою
тегу <img src="…" id="r1" style="width:400px;position:absolute;top:50px;left:100px"/>. Для
того, щоб отримати повідомлення про значення відступу рисунку від лівої сторони вікна
браузера треба виконати оператори:
var st=getComputedStyle(document.getElementById("r1"),"");
var val=st.getPropertyValue("left");
alert("Отступ слева: "+val);.
Перший оператор створює, використовуючи метод getComputedStyle(), посилальне ім’я
змінної st на об’єкт CSSStyleDeclaration. Це дає можливість у подальших операторах
звертатися до методів цього об’єкту через посилальне ім’я st, що і використовує
наступний оператор, присвоюючи змінній val значення властивості left, задане тегом
style у тегу <img>. Завдяки цьому методом alert() у діалогове вікно буде виведено
повідомлення «Отступ слева: 100px».
Приклад_3. Створити веб-сторінку з блоком розмірами 500 300 пікселів,
розташованим у нижньому правому куті вікна браузера. Навколо блоку повинна буди
одинарна рамка червоного кольору. Забезпечити кольоровий фон блоку RGB кодом
#aabbcc. Сторінка повинна мати у верхній частині текстове поле форми і кнопку. На
кнопці після завантаження сторінки повинен бути напис «Показать значение свойства
width». При кожному натисканні кнопки має запускатися скрипт, який за допомогою
методів getComputedStyle() і getPropertyValue() виконує послідовне зчитування значень
властивостей CSS, що були використані у атрибуті style тегу <div> для форматування
блоку. Ці значення повинні виводитися у текстове поле форми. Після першого
натискання кнопки на ній повинен з’явитися напис «Показать значение свойства
height». Наступні натискання повинні забезпечувати послідовний перегляд всіх значень
властивостей CSS, використаних для форматування блоку з виводом у напис на кнопці
імен цих властивостей. Для форматування блоку використати властивості CSS: width,
height, background, position, bottom, right, border.
Для виводу значень властивостей CSS після їх зчитування за допомогою методів
getComputedStyle() і getPropertyValue() до текстового поля форми можна використати
властивість value об’єкту text. Ця ж властивість value, але вже об’єкту button може бути
використана для зміни напису на кнопці після її натискання. Для зменшення об’єму коду
при зверненні у скрипті до кнопки, блоку і текстового поля форми можна створити
посилальні імена за допомогою методу getElementById(). Програмні коди, що
підтримують роботу веб-сторінки, наведені нижче:
<html>
<head>
<title>Метод getComputedStyle()</title>
<link rel="stylesheet" type="text/css" href="Prim3_CSS.css"/>
</head>
<body>
<form><center>
<input type="text" id="inform" class="tx"/><br>
<input type="button" value="Показать значение свойства width" id="kn" class="b"
onClick="sho()"/>
</center></form>
<div id="b" style="width:500px;height:300px;background:#aabbcc;position:absolute;
bottom:10px;right:50px;border:5px solid red">
</div>
</body>
</html>
Файл «Prim3_CSS.css»
body{background:#ddeeff}
.b{width:2000px;height:200px;background:#000060;font:100px Arial;color:white}
.tx{width:2100px;height:200px;background:#ffeedd;font:150px Arial;color:#600000;text-
align:center}
var m=1;//Допоміжна змінна
function sho()
{
//Створюють посилальні імена на кнопку (knop) блок (blok) і текстове поле форми (inform)
var knop=document.getElementById("kn")
var blok=document.getElementById("b");
var vprop=document.getElementById("inform");
//Створює посилальне ім’я для звернення до методів об’єкту CSSStyleDeclaration
var st=getComputedStyle(blok,"");
//Вилучає і виводить значення властивостей CSS, використаних для форматування блоку
if(m==1){vprop.value=st.getPropertyValue("width");knop.value="Показать значение
свойства height"};
if(m==2){vprop.value=st.getPropertyValue("height");knop.value="Показать значение
свойства background"};
if(m==3){vprop.value=st.getPropertyValue("background");knop.value="Показать
значение свойства position"};
if(m==4){vprop.value=st.getPropertyValue("position");knop.value="Показать значение
свойства bottom"};
if(m==5){vprop.value=st.getPropertyValue("bottom");knop.value="Показать значение
свойства right"};
if(m==6){vprop.value=st.getPropertyValue("right");knop.value="Показать значение
свойства border"};
if(m==7){vprop.value=st.getPropertyValue("border");knop.value="Показать значение
свойства width";m=0};
m=m+1;
};
Форматування кнопки, текстового поля форми і кольорового фону сторінки
здійснюється окремим файлом «Prim3_CSS.css», тоді як блок форматується правилами
CSS, що вбудовані у тег <div> за допомогою атрибуту style. Ці засоби форматування
забезпечують вигляд веб-сторінку додатку, показаний на рис. 8.
Для забезпечення послідовного зчитування і виводу значень властивостей
починаючи з width та закінчуючи border у скрипті (функція sho()) використовується
допоміжна змінна m, значення якої збільшується на одиницю при кожному натисканні на
кнопку. Для кнопки, блоку та текстового поля виводу у скрипті створені посилальні
імена knop, blok та vprop, відповідно. Це дозволяє виводити значення властивостей у
текстове поле форми за допомогою оператору присвоювання vprop.value=
st.getPropertyValue("властивість") і змінювати напис на кнопці за допомогою оператору
присвоювання knop.value="Показать значение свойства «властивість»". Вибір при
кожному натисканні кнопки властивості, значення якої буде отримано і виведено,
відбувається за допомогою оператора if, до умови якого входить допоміжна змінна m. У
останньому умовному операторі функції sho(), з якого виводиться значення останньої
властивості border, допоміжній змінній присвоюється значення 0, а напис на кнопці
змінюється на початковий «Показать значение свойства width». Це завершує цикл
зчитування значень властивостей CSS, використаних для форматування блоку і
встановлює сторінку у початковий стан, з якого цикл зчитування може бути повторений.
Таким чином, метод об’єкту window getComputedStyle(), поряд з розглянутими
раніше властивостями об’єкту Style, властивостями і методами об’єкту
CSSStyleDectaration надає додаткові можливості для роботи з засобами каскадних листів
стилів при їх використанні для створенні програмними засобами дизайну веб-сторінок в
цілому і окремих їх елементів.
а б
в г
д е
ж з
Рис. 8. Вигляд веб-сторінки додатку зразу після завантаження до вікна браузера (а) і
після послідовного натискання кнопки у циклі читання значень властивостей CSS,
використаних для форматування блоку (б) – (з)

Объект CSSStyleDeclaration

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Объект CSSStyleDeclaration

Uploaded by

Copyright:

Available Formats

Об’єкт CSSStyleDectaration, властивості і методи

При форматуванні елементів веб-сторінки за допомогою мови каскадних листів

//Показує у текстовому поли форми правила CSS для форматування рисунка

//Показує у текстовому поли форми правила CSS для форматування блока

/*Показує у текстовому поли форми правила CSS для форматування багаторядкового

//Змінює дизайн рисунку

Як можна бачити з файлу Prim1_JS.js графічний фон створюється правилами CSS

3. Методи об’єкту CSSStyleDeclaration

Об’єкт CSSStyleDeclaration має методи, що тим чи іншим чином забезпечують

Для роботи у скриптах мови JavaScript з властивостями мови CSS можна

You might also like