В этом тренажере вы попрактикуетесь в определении позиции HTML-элементов относительно их родительских контейнеров. Вам будут представлены различные сценарии, где потребуется использовать JavaScript для получения координат и размеров элементов. Каждое задание включает в себя готовый HTML-код, CSS (если необходимо) и JavaScript-код с пропусками, которые вам нужно заполнить. Это поможет вам лучше понять, как работают свойства `offsetLeft`, `offsetTop`, `offsetWidth`, `offsetHeight`, и как их можно применять для решения практических задач.
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Получение координат верхнего левого угла
В этом задании вам дан div с вложенным в него элементом (например, изображением или другим div). Ваша задача — получить координаты (x, y) верхнего левого угла вложенного элемента относительно его родительского элемента. Результат (координаты) должен быть использован для изменения стилей другого элемента.
<div id="parent" style="position: relative; width: 300px; height: 200px; border: 1px solid black;">
<div id="child" style="position: absolute; width: 50px; height: 50px; background-color: red; top: 20px; left: 30px;"></div>
</div>
<div id="tg" style="margin-top: 20px;"></div>const child = document.getElementById("child");
const target = document.getElementById("tg");
const x = child.input__1;
const y = child.input__2;
target.style.paddingLeft = x + input__3;
target.style.paddingTop = y + "px";
target.textContent = "x: " + x + ", y: " + y;Расчет середины элемента
Дан элемент внутри родительского контейнера. Необходимо рассчитать координаты середины этого элемента относительно родителя. Используйте полученные координаты, чтобы спозиционировать другой элемент по центру первого.
<div id="parent" style="position: relative; width: 400px; height: 300px; border: 1px solid blue;">
<div id="child" style="position: absolute; width: 80px; height: 60px; background-color: green; left: 50px; top: 30px;"></div>
</div>
<div id="marker" style="position: absolute; width: 10px; height: 10px; background-color: red;"></div>const child = document.getElementById(input__1);
const marker = document.getElementById("marker");
const centerX = child.offsetLeft + child.input__2 / 2;
const centerY = child.offsetTop + child.offsetHeight / input__3;
marker.style.left = input__4 + "px";
marker.style.top = centerY + "px";Позиционирование картинки
Дано изображение внутри контейнера. Получите его позицию относительно родителя и отобразите эти значения. Затем измените позицию другого элемента на странице, используя полученные значения.
<div id="container" style="position: relative; width: 500px; height: 400px; border: 1px solid black;">
<img id="image" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" style="position: absolute; top: 50px; left: 100px;" alt="test image">
</div>
<div id="info" style="margin-top: 20px;"></div>
<div id="mover" style="position: absolute; width: 20px; height: 20px; background-color: blue;"></div>const image = document.getElementById("image");
const info = document.getElementById("info");
const mover = document.getElementById(input__1);
const imageX = image.offsetLeft;
const imageY = input__2.offsetTop;
info.textContent = `Image position: X=${imageX}, Y=${imageY}`;
mover.style.left = imageX + input__3;
mover.style.top = imageY + "px";Определение размеров и позиции
Дан элемент, находящийся внутри родительского контейнера. Получите его полную ширину и высоту (включая padding и border), а также позицию относительно родителя. Выведите полученную информацию в текстовый элемент.
<div id="outer" style="position: relative; width: 400px; height: 300px; border: 2px solid orange;">
<div id="inner" style="position: absolute; width: 100px; height: 80px; background-color: lightblue; padding: 10px; border: 5px solid blue; top: 40px; left: 60px;"></div>
</div>
<p id="output"></p>const inner = document.getElementById("inner");
const output = document.getElementById("output");
const width = inner.input__1;
const height = inner.offsetHeight;
const x = inner.offsetLeft;
const y = inner.input__2;
output.textContent = `Width: ${input__3}px, Height: ${height}px, X: ${x}px, Y: ${y}px`;Динамическое позиционирование
В этом задании два элемента. Нужно получить позицию первого элемента относительно родителя и использовать эти данные, чтобы динамически позиционировать второй элемент, сместив его на определенное расстояние от первого.
<div id="parent-div" style="position: relative; width: 600px; height: 400px; border: 1px solid black;">
<div id="element1" style="position: absolute; top: 100px; left: 150px; width: 50px; height: 50px; background-color: red;"></div>
<div id="element2" style="position: absolute; width: 30px; height: 30px; background-color: blue;"></div>
</div>const element1 = document.getElementById("element1");
const element2 = document.getElementById("element2");
const offsetX = 50; // Смещение по X
const offsetY = 20; // Смещение по Y
const newX = element1.input__1 + offsetX;
const newY = element1.offsetTop + input__2;
element2.style.left = newX + "px";
element2.style.top = input__3 + "px";Позиционирование относительно другого элемента
Даны два элемента внутри общего родителя. Задача: определить позицию первого элемента и расположить второй элемент непосредственно под ним (по вертикали, на одном уровне по горизонтали).
<div style="position: relative; width: 300px; height: 250px; border: 1px solid #ccc;">
<div id="first" style="position: absolute; top: 50px; left: 80px; width: 100px; height: 60px; background: lightgreen;"></div>
<div id="second" style="position: absolute; width: 80px; height: 40px; background: lightblue;"></div>
</div>const first = document.getElementById('first');
const second = document.getElementById('second');
second.style.left = first.offsetLeft + 'px';
second.style.top = input__1.offsetTop + first.offsetHeight + 'px';Центрирование элемента с использованием offset
Дан родительский элемент и дочерний элемент внутри него. Используйте JavaScript и свойства offset, чтобы абсолютно спозиционировать дочерний элемент строго по центру родительского. Размеры родительского и дочернего элементов могут быть разными.
<div id="parent-container" style="position: relative; width: 400px; height: 300px; border: 1px solid tomato;">
<div id="child-element" style="position: absolute; width: 100px; height: 80px; background-color: lightseagreen;"></div>
</div>const parent = document.getElementById('parent-container');
const child = document.getElementById('child-element');
child.style.left = (parent.offsetWidth / 2) - (child.offsetWidth / 2) + 'px';
child.style.input__1 = (parent.offsetHeight / input__2) - (child.offsetHeight / 2) + 'px';Изменение размеров на основе позиции
Имеется элемент внутри контейнера. Получите его позицию и используйте эти значения, чтобы изменить ширину и высоту другого элемента.
<div style="position: relative; width: 500px; height: 300px; border: 1px solid #888;">
<div id="source" style="position: absolute; top: 60px; left: 80px; width: 120px; height: 90px; background: gold;"></div>
</div>
<div id="target-div" style="background: lightcoral; margin-top: 20px;">Target</div>const source = document.getElementById('source');
const targetDiv = document.getElementById('target-div');
targetDiv.style.width = source.offsetLeft + "px";
targetDiv.style.height = source.input__1 + input__2;