В этом тренажере вы попрактикуетесь в изменении стилей HTML-элементов напрямую через JavaScript, используя свойство `style`. Это полезный навык для динамического изменения внешнего вида веб-страницы в ответ на действия пользователя или другие события. Вам будет предоставлен HTML-код и JavaScript-код с пропусками. Ваша задача - заполнить пропуски, чтобы добиться желаемого результата. Каждое задание сфокусировано на изменении одного или нескольких CSS-свойств.
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Изменение цвета текста
Измените цвет текста в абзаце с id "myParagraph" на красный. Вам нужно получить элемент по его ID и затем изменить его свойство `style.color`.
<p id="myParagraph">Этот текст должен стать красным.</p>document.input__1("myParagraph").style.input__2 = "red";Изменение размера шрифта
Увеличьте размер шрифта заголовка h1 с id "myHeading" до 32 пикселей. Используйте свойство `style.fontSize`.
<h1 id="myHeading">Заголовок</h1>document.getElementById("myHeading").style.input__1 = "input__2px";Изменение фона элемента
Измените цвет фона элемента div с id "myDiv" на синий. Используйте свойство `style.backgroundColor`.
<div id="myDiv">Этот блок должен иметь синий фон.</div>document.input__1('myDiv').input__2.backgroundColor = input__3;Добавление и изменение нескольких стилей
Измените цвет текста абзаца с id "multiStyle" на белый, а цвет фона - на черный.
<p id="multiStyle">Текст с измененными стилями.</p>const paragraph = document.getElementById("multiStyle");
paragraph.style.color = input__1;
paragraph.input__2.backgroundColor = input__3;Изменение ширины и высоты
Установите ширину и высоту изображения с id "myImage" равными 200 пикселей.
<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Пример изображения">document.getElementById(input__1).style.width = "200px";
document.getElementById("myImage").style.input__2 = "input__3";Скрытие элемента
Скройте кнопку с id "myButton", установив для свойства `display` значение "none".
<button id="myButton">Нажми меня</button>document.getElementById("myButton").style.input__1 = input__2;Изменение непрозрачности
Сделайте элемент div с id "myOpacityDiv" полупрозрачным, установив свойство `opacity` равным 0.5.
<div id="myOpacityDiv">Этот div должен стать полупрозрачным.</div>document.getElementById("myOpacityDiv").style.input__1 = input__2;Изменение стиля границы
Добавьте сплошную черную границу толщиной 2 пикселя к элементу div с id "myBorderDiv".
<div id="myBorderDiv">Этот div должен иметь границу.</div>document.getElementById("myBorderDiv").style.input__1 = "input__2";Изменение полей (margin)
Установите внешние отступы (margin) для элемента с id "myMarginElement" равными 10px со всех сторон.
<div id="myMarginElement" style="background-color: lightblue;">Элемент с отступами</div>document.getElementById(input__1).style.input__2 = "input__3";Изменение внутренних отступов (padding)
Установите внутренние отступы (padding) для элемента с id "myPaddingElement" равными 20px со всех сторон.
<div id="myPaddingElement" style="background-color: lightgreen;">Элемент с внутренними отступами</div>document.getElementById("myPaddingElement").style.padding = input__1;Изменение стиля курсора
Измените стиль курсора при наведении на элемент с id "myCursorElement" на указатель (pointer).
<div id="myCursorElement">Наведи на меня курсор</div>document.getElementById(input__1).style.cursor = "input__2";Изменение выравнивания текста
Выровняйте текст в абзаце с id "myTextAlign" по центру.
<p id="myTextAlign">Этот текст должен быть выровнен по центру.</p>document.getElementById("myTextAlign").style.input__1 = "input__2";Изменение начертания шрифта
Сделайте текст в элементе span с id="myFontWeight" жирным.
<p>Это обычный текст, а <span id="myFontWeight">этот текст должен быть жирным</span>.</p>document.getElementById(input__1).style.input__2 = "input__3";Изменение стиля текста (наклонный)
Сделайте текст в элементе span с id="myFontStyle" наклонным (курсивом).
<p>Это обычный текст, а <span id="myFontStyle">этот текст должен быть наклонным</span>.</p>document.getElementById("myFontStyle").style.fontStyle = input__1;Комплексное изменение стилей
Измените стили элемента с id="complexStyle": цвет текста на синий, размер шрифта на 18px, фон на светло-серый, добавьте внутренний отступ 10px и внешние отступы 20px.
<div id="complexStyle">Элемент с комплексными стилями</div>const elem = document.getElementById("complexStyle");
elem.style.color = "blue";
elem.style.fontSize = "18px";
elem.style.backgroundColor = "lightgray";
elem.style.input__1 = "input__2";
elem.style.input__3 = "input__4";
Загрузка...