Получение позиции элемента относительно окна браузера: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы попрактикуетесь в получении координат и размеров элементов HTML относительно окна браузера. Вы будете использовать различные свойства объекта `DOMRect`, возвращаемого методом `getBoundingClientRect()`, а также свойства `window`, такие как `innerWidth`, `innerHeight`, `scrollX` и `scrollY`. В каждом задании вам будет предоставлен HTML-код и частично написанный JavaScript-код. Ваша задача - заполнить пропуски в JavaScript-коде, чтобы добиться описанного результата.

Список тем

Модуль 1: Основы выбора элементов
Модуль 2: Манипуляция содержимым
Модуль 3: Работа с атрибутами
Модуль 4: Управление классами
Модуль 5: Управление стилями
Модуль 6: Создание и удаление элементов
Модуль 7: Обработка событий
Модуль 8: Работа с формами
Модуль 9: Продвинутые манипуляции
Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
Модуль 11: Работа с медиа-элементами
- Создание простой галереи изображений.
- Работа с Canvas.
Модуль 12: Практические задания
- Создание интерактивного списка задач (todo list).
- Создание простого калькулятора.

Получение координат элемента

Получите координаты верхнего левого угла элемента с id "myElement" относительно окна браузера и выведите их в консоль. Используйте метод `getBoundingClientRect()`.

CSS

#myElement {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50px;
  left: 100px;
}

HTML

Восстановить HTML

                      <div id="myElement"></div>

<div id="myElement"></div>

JavaScript

const element = document.getElementById("myElement");
const rect = element.input__1;
console.log("Top: ", rect.input__2);
console.log("Left: ", rect.input__3);

                     const element = document.getElementById("myElement");
const rect = element.input__1;
console.log("Top: ", rect.input__2);
console.log("Left: ", rect.input__3);

Используйте метод `getBoundingClientRect()` для получения объекта `DOMRect`, содержащего свойства `top`, `left`, `right`, `bottom`, `width` и `height` элемента.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Получение ширины и высоты элемента

Получите ширину и высоту элемента с id "myImage" и выведите их в консоль.

HTML

Восстановить HTML

                      <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="image">

<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="image">

JavaScript

const image = document.getElementById(input__1);
const rect = image.getBoundingClientRect();
console.log("Width: ", rect.input__2);
console.log("Height: ", rect.input__3);

                     const image = document.getElementById(input__1);
const rect = image.getBoundingClientRect();
console.log("Width: ", rect.input__2);
console.log("Height: ", rect.input__3);

Используйте метод `getBoundingClientRect()` для получения объекта `DOMRect`, а затем обратитесь к свойствам `width` и `height`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Определение видимости элемента

Определите, находится ли элемент с id "myDiv" полностью в пределах видимой области окна браузера. Выведите `true` если элемент полностью видим, и `false` в противном случае.

CSS

#myDiv {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 100px;
}

HTML

Восстановить HTML

                      <div id="myDiv"></div>

<div id="myDiv"></div>

JavaScript

const div = document.getElementById("myDiv");
const rect = div.getBoundingClientRect();
const isVisible = rect.top >= 0 && rect.left >= 0 && rect.bottom <= input__1 && rect.right <= input__2;
console.log(isVisible);

                     const div = document.getElementById("myDiv");
const rect = div.getBoundingClientRect();
const isVisible = rect.top >= 0 && rect.left >= 0 && rect.bottom <= input__1 && rect.right <= input__2;
console.log(isVisible);

Используйте `getBoundingClientRect()` и сравните его свойства (`top`, `left`, `right`, `bottom`) с размерами окна (`window.innerWidth`, `window.innerHeight`).

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Учет прокрутки страницы

Получите координаты элемента с id "mySection" относительно документа (учитывая прокрутку страницы). Выведите координаты в консоль.

CSS

#mySection {
  width: 200px;
  height: 200px;
  background-color: green;
  margin-top: 500px;
  margin-left: 200px;
}

HTML

Восстановить HTML

                      <div style="height: 2000px;">
  <div id="mySection"></div>
</div>

<div style="height: 2000px;">
  <div id="mySection"></div>
</div>

JavaScript

const section = document.getElementById("mySection");
const rect = section.getBoundingClientRect();
const topWithScroll = rect.top + input__1;
const leftWithScroll = rect.left + input__2;
console.log("Top with scroll: ", topWithScroll);
console.log("Left with scroll: ", leftWithScroll);

                     const section = document.getElementById("mySection");
const rect = section.getBoundingClientRect();
const topWithScroll = rect.top + input__1;
const leftWithScroll = rect.left + input__2;
console.log("Top with scroll: ", topWithScroll);
console.log("Left with scroll: ", leftWithScroll);

Сложите координаты элемента, полученные с помощью `getBoundingClientRect()`, со значениями прокрутки страницы `window.scrollX` и `window.scrollY`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Изменение позиции элемента

Измените положение элемента с id="moveableElement" так, чтобы его верхний левый угол находился на расстоянии 200 пикселей от левого края окна и 150 пикселей от верхнего края. Используйте относительное позиционирование.

CSS

#moveableElement {
 position: relative;
 width: 50px;
 height: 50px;
 background-color: purple;
}

HTML

Восстановить HTML

                      <div id="moveableElement"></div>

<div id="moveableElement"></div>

JavaScript

const element = document.getElementById("moveableElement");
element.style.left = input__1;
element.style.top = input__2;

                     const element = document.getElementById("moveableElement");
element.style.left = input__1;
element.style.top = input__2;

Используйте свойства `style.left` и `style.top` для установки новых координат элемента. Не забудьте указать единицы измерения (px).

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Центрирование элемента

Спозиционируйте элемент с id="centeredElement" строго по центру окна браузера, используя абсолютное позиционирование и `getBoundingClientRect()`.

CSS

#centeredElement {
 position: absolute;
 width: 100px;
 height: 50px;
 background-color: orange;
}

HTML

Восстановить HTML

                      <div id="centeredElement"></div>

<div id="centeredElement"></div>

JavaScript

const element = document.getElementById("centeredElement");
const rect = element.getBoundingClientRect();
const left = (window.innerWidth - rect.input__1) / 2;
const top = (window.innerHeight - rect.input__2) / 2;
element.style.left = left + "px";
element.style.top = top + "px";

                     const element = document.getElementById("centeredElement");
const rect = element.getBoundingClientRect();
const left = (window.innerWidth - rect.input__1) / 2;
const top = (window.innerHeight - rect.input__2) / 2;
element.style.left = left + "px";
element.style.top = top + "px";

Используйте `window.innerWidth` и `window.innerHeight` для получения размеров окна, `getBoundingClientRect()` для получения размеров элемента, а затем вычислите необходимые значения `left` и `top`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Получение размеров вложенного элемента

Получите ширину и высоту вложенного элемента с id="innerElement" относительно его родительского элемента с id="outerElement".

CSS

#outerElement {
 position: relative;
 width: 300px;
 height: 200px;
 background-color: yellow;
}

#innerElement {
 position: absolute;
 top: 50px;
 left: 80px;
 width: 100px;
 height: 60px;
 background-color: lightblue;
}

HTML

Восстановить HTML

                      <div id="outerElement">
 <div id="innerElement"></div>
</div>

<div id="outerElement">
 <div id="innerElement"></div>
</div>

JavaScript

const outer = document.getElementById("outerElement");
const inner = document.getElementById("innerElement");

const outerRect = outer.getBoundingClientRect();
const innerRect = inner.getBoundingClientRect();

const relativeWidth = innerRect.width;
const relativeHeight = innerRect.height;

console.log("Relative Width:", relativeWidth);
console.log("Relative Height:", relativeHeight);

                     const outer = document.getElementById("outerElement");
const inner = document.getElementById("innerElement");

const outerRect = outer.getBoundingClientRect();
const innerRect = inner.getBoundingClientRect();

const relativeWidth = innerRect.width;
const relativeHeight = innerRect.height;

console.log("Relative Width:", relativeWidth);
console.log("Relative Height:", relativeHeight);

Используйте `getBoundingClientRect()` для обоих элементов, а затем вычтите координаты родительского элемента из координат дочернего.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Определение пересечения элементов

Определите, пересекаются ли два элемента с id="element1" и "element2". Выведите `true`, если элементы пересекаются, и `false` в противном случае.

CSS

#element1 {
 position: absolute;
 top: 50px;
 left: 100px;
 width: 100px;
 height: 100px;
 background-color: red;
}

#element2 {
 position: absolute;
 top: 80px;
 left: 150px;
 width: 120px;
 height: 80px;
 background-color: blue;
}

HTML

Восстановить HTML

                      <div id="element1"></div>
<div id="element2"></div>

<div id="element1"></div>
<div id="element2"></div>

JavaScript

const elem1 = document.getElementById("element1");
const elem2 = document.getElementById("element2");

const rect1 = elem1.getBoundingClientRect();
const rect2 = elem2.getBoundingClientRect();

const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right ||
 rect1.bottom < rect2.top || rect1.top > input__1);

console.log("Overlap:", overlap);

                     const elem1 = document.getElementById("element1");
const elem2 = document.getElementById("element2");

const rect1 = elem1.getBoundingClientRect();
const rect2 = elem2.getBoundingClientRect();

const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right ||
 rect1.bottom < rect2.top || rect1.top > input__1);

console.log("Overlap:", overlap);

Используйте `getBoundingClientRect()` для обоих элементов и проверьте условия перекрытия по осям X и Y.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку