В этом тренажере вы попрактикуетесь изменять позиционирование HTML-элементов с помощью JavaScript. Вам будут представлены задачи, где нужно будет манипулировать свойствами CSS, такими как `position`, `top`, `left`, `right`, `bottom`, `transform`, `z-index` и другими, чтобы добиться желаемого расположения элементов на странице. Каждое задание содержит готовый HTML-код, CSS (если необходимо) и JavaScript-код с пропусками, которые вам нужно заполнить. После ввода кода вы сможете сразу увидеть результат.
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Изменение position на static
Задан элемент div с идентификатором "block". Изначально у него установлено абсолютное позиционирование. Измените его позиционирование на статическое, используя JavaScript.
#block {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}<div id="block"></div>document.getElementById("block").style.position = input__1;Изменение position на relative
Имеется элемент div с id "relative-block". Измените его позиционирование на относительное (relative) с помощью JavaScript.
#relative-block {
width: 150px;
height: 150px;
background-color: blue;
}<div id="relative-block"></div>document.getElementById(input__1).style.input__2 = "relative";Смещение элемента с relative позиционированием
Элемент с id "offset-block" имеет относительное позиционирование. Сместите его на 20 пикселей вниз и на 30 пикселей вправо, используя JavaScript.
#offset-block {
position: relative;
width: 100px;
height: 100px;
background-color: green;
}<div id="offset-block"></div>const block = document.getElementById("offset-block");
block.style.top = input__1;
block.style.left = input__2;Изменение position на absolute
Задан элемент div с id "absolute-block". Измените его позиционирование на абсолютное, используя JavaScript, и установите его в верхний левый угол родительского элемента.
.container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid black;
}
#absolute-block {
width: 50px;
height: 50px;
background-color: orange;
}<div class="container">
<div id="absolute-block"></div>
</div>document.getElementById("absolute-block").style.position = "absolute";
document.getElementById("absolute-block").style.top = input__1;
document.getElementById("absolute-block").style.left = input__2;Абсолютное позиционирование относительно родителя
Есть контейнер (div с классом "container") и внутри него элемент (div с id "inner-block"). Сделайте так, чтобы "inner-block" был абсолютно спозиционирован в правом нижнем углу "container".
.container {
position: relative;
width: 400px;
height: 300px;
border: 1px solid black;
}
#inner-block {
width: 80px;
height: 80px;
background-color: purple;
}<div class="container">
<div id="inner-block"></div>
</div>const innerBlock = document.getElementById("inner-block");
innerBlock.style.position = "absolute";
innerBlock.style.bottom = input__1;
innerBlock.style.right = input__2;Изменение z-index
Имеются два перекрывающихся блока (div с id "block1" и "block2"). Изначально "block2" находится поверх "block1". С помощью JavaScript измените z-index так, чтобы "block1" оказался поверх "block2".
#block1 {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
#block2 {
position: absolute;
top: 40px;
left: 40px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2;
}<div id="block1"></div>
<div id="block2"></div>document.getElementById("block1").style.zIndex = input__1;Использование transform: translate()
Сместите элемент с id "translate-block" на 50 пикселей вправо и на 20 пикселей вниз, используя функцию `translate()` свойства `transform`.
#translate-block {
width: 120px;
height: 80px;
background-color: yellow;
}<div id="translate-block"></div>document.getElementById("translate-block").style.transform = input__1;Отрицательные значения в translate()
Сместите элемент с id "negative-translate-block" на 30 пикселей влево и на 10 пикселей вверх, используя `transform: translate()`.
#negative-translate-block {
width: 100px;
height: 100px;
background-color: lightblue;
}<div id="negative-translate-block"></div>const block = document.getElementById("negative-translate-block");
block.style.input__1 = "translate(input__2)";Изменение position на fixed
Задан элемент div с идентификатором "fixed-block". Измените его позиционирование на фиксированное (fixed), используя JavaScript, и установите его в правый нижний угол экрана.
#fixed-block {
width: 70px;
height: 70px;
background-color: #f0f;
}<div id="fixed-block"></div>const fixedBlock = document.getElementById(input__1);
fixedBlock.style.position = input__2;
fixedBlock.style.bottom = "0";
fixedBlock.style.right = "0";Комбинирование translate() и rotate()
Поверните элемент с id "rotate-block" на 45 градусов по часовой стрелке и сместите его на 100 пикселей вправо, используя свойство `transform`.
#rotate-block {
width: 100px;
height: 50px;
background-color: coral;
}<div id="rotate-block"></div>document.getElementById("rotate-block").style.input__1 = "rotate(input__2) translate(input__3)";Центрирование элемента с помощью absolute и transform
Спозиционируйте элемент с id "center-block" строго по центру родительского контейнера, используя комбинацию `position: absolute` и `transform: translate()`. Родительский контейнер имеет класс "parent-container".
.parent-container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid black;
}
#center-block {
width: 50px;
height: 50px;
background-color: limegreen;
}<div class="parent-container">
<div id="center-block"></div>
</div>const centerBlock = document.getElementById("center-block");
centerBlock.style.position = "absolute";
centerBlock.style.top = "50%";
centerBlock.style.left = "50%";
centerBlock.style.transform = input__1;Изменение размеров элемента
Задан элемент с id "resizable-block". Увеличьте его ширину до 200px, а высоту до 150px с помощью JavaScript.
#resizable-block {
width: 100px;
height: 100px;
background-color: teal;
}<div id="resizable-block"></div>const resizableBlock = document.getElementById("resizable-block");
resizableBlock.style.width = input__1;
resizableBlock.style.height = input__2;Смена изображения при наведении
Имеется изображение с id "myImage". При наведении курсора мыши на изображение (событие `mouseover`), измените его `src` на другую картинку. При убирании курсора (событие `mouseout`) верните исходное изображение.
<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" width="150" height="150">const image = document.getElementById("myImage");
image.onmouseover = function() {
image.src = input__1;
};
image.onmouseout = function() {
image.src = input__2;
};Плавное перемещение элемента
Сделайте так, чтобы при клике на кнопку с id "moveButton", элемент с id "smooth-block" плавно перемещался вправо на 200 пикселей. Используйте CSS transition.
#smooth-block {
width: 100px;
height: 100px;
background-color: crimson;
transition: transform 0.5s ease;
}<button id="moveButton">Переместить</button>
<div id="smooth-block"></div>document.getElementById("moveButton").addEventListener("click", function() {
document.getElementById("smooth-block").style.transform = input__1;
});Появление и скрытие элемента
Создайте кнопку с id "toggleButton". При нажатии на кнопку элемент с id "fade-block" должен плавно появляться, если он был скрыт, и плавно исчезать, если он был видим. Используйте CSS transition и opacity.
#fade-block {
width: 150px;
height: 100px;
background-color: darkseagreen;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}<button id="toggleButton">Показать/Скрыть</button>
<div id="fade-block"></div>const toggleButton = document.getElementById("toggleButton");
const fadeBlock = document.getElementById("fade-block");
toggleButton.addEventListener("click", function() {
if (fadeBlock.style.opacity === "0") {
fadeBlock.style.opacity = "1";
fadeBlock.style.visibility = input__1;
} else {
fadeBlock.style.opacity = "0";
fadeBlock.style.visibility = input__2;
}
});
Загрузка...