Вы находитесь на странице: 1из 3

УЧРЕЖДЕНИЕ ОБРАЗОВАНИЯ «БЕЛОРУССКИЙ ГОСУДАРСТВЕННЫЙ

УНИВЕРСИТЕТ ИНФОРМАТИКИ И РАДИОЭЛЕКТРОНИКИ» ФИЛИАЛ «МИНСКИЙ


РАДИОТЕХНИЧЕСКИЙ КОЛЛЕДЖ»

Программные средства создания Internet-приложения

Лабораторная работа №26


«Управление CSS-свойствами HTML-элементов при помощи языка
JavaScript»

Выполнила: Проверила:
учащаяся группы №62492 Виничук О.Н.
Гулида А.В.

Минск 2020
1. Цель работы

Формирование умений управления CSS-свойствами HTML-элементов на языке


JavaScript.

2. Задание

Создать HTML-документ, содержащий сценарии управления CSSсвойствами


HTML-элементов на языке JavaScript.

3. Оснащение работы
ПК, текстовый редактор, браузер.

Результат выполнения работы:


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title id="title">Заголовок</title>
</head>
<body>
<button onclick="addText();">Add Text</button>
<button onClick="blockText();">second</button>

<form name="text">
<input type="text" placeholder="text" name="firstInput" id="myText">
</form>

<img src="photo.jpg" alt="" id="photoOnPage" onclick="resizeImage(this)"


style="width:400px;height:400px;">
<button onClick="defaultValue();">second</button>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

const addText = () => {


const result = prompt("Введите текст для поля");
let form = document.forms.namedItem('text');
form.elements.firstInput.value = result;
};

const blockText = () => {


const myBlock = document.getElementById('myText');
myBlock.readOnly = true;
myBlock.style.color = "red";
myBlock.style.fontStyle = "italic";
};

let counter = 0;
const resizeImage = (img) => {
img.style.width = img.clientWidth + 20 + "px";
img.style.height = img.clientHeight + 20 + "px";
counter++;
};

const defaultValue = () => {


const img = document.getElementById('photoOnPage');
img.style.width = img.clientWidth - 20 * counter + "px";
img.style.height = img.clientHeight - 20 * counter + "px";
}

Контрольные вопросы
1. Что представляет собой объект Style?
Свойство style представляет сложный объект для управления стилем и напрямую
сопоставляется с атрибутом style html-элемента. Этот объект содержит набор свойств CSS:
element.style.свойствоCSS.
2. Опишите способы изменения стилевых свойств элементов.
Для работы со стилевыми свойствами элементов в JavaScript применяются,
главным образом, два подхода:
 изменение свойства style;
 изменение значения атрибута class.
3. В каких случаях целесообразно использовать свойство classList?
Для управления множеством классов гораздо удобнее использовать свойство
classList.
Это свойство представляет объект, реализующий следующие методы:
 add(className) – добавляет класс className;
 remove(className) – удаляет класс className;
 toggle(className) – переключает у элемента класс на className. Если класса
нет, то он добавляется, если есть, то удаляется.

Оценить