В этом разделе вы на практике освоите получение размеров элементов DOM. Каждое задание представляет собой HTML-структуру и JavaScript-код с пропусками. Ваша задача - заполнить пропуски в JavaScript-коде, чтобы получить требуемые размеры элементов и отобразить их на странице. Задания расположены от простого к сложному, начиная с базовых свойств, таких как `offsetWidth` и `offsetHeight`, и заканчивая более продвинутыми методами, такими как `getBoundingClientRect()` и работа с прокруткой."
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Получение полной ширины элемента
В этом задании вам нужно получить полную ширину элемента `<div>` с идентификатором `element-to-measure`. Полная ширина включает в себя ширину контента, внутренние отступы (padding) и границы (border). Результат должен быть выведен в элемент с id `output`.
.element {
width: 200px;
padding: 20px;
border: 5px solid black;
background-color: lightblue;
}<div id="element-to-measure" class="element">
Этот элемент имеет заданные размеры, отступы и границы.
</div>
<div id="output"></div>const element = document.input__1('element-to-measure');
const width = element.input__2;
document.input__3('output').textContent = 'Ширина элемента: ' + width + 'px';Получение полной высоты элемента
Аналогично предыдущему заданию, получите полную высоту элемента `<div>` с id `element-to-measure`. Полная высота включает в себя высоту контента, внутренние отступы и границы. Выведите результат в элемент с id `output`.
.element {
height: 100px;
padding: 15px;
border: 3px solid green;
background-color: lightcoral;
}<div id="element-to-measure" class="element">
Этот элемент имеет заданные размеры, отступы и границы.
</div>
<div id="output"></div>const element = document.input__1('element-to-measure');
const height = element.input__2;
document.input__3('output').textContent = 'Высота элемента: ' + height + 'px';Получение внутренней ширины элемента (clientWidth)
Теперь получите внутреннюю ширину элемента `<div>` с id `element-to-measure`. Внутренняя ширина включает в себя только ширину контента и внутренние отступы (padding), но исключает границы (border) и полосу прокрутки. Выведите результат в элемент с id `output`.
.element {
width: 300px;
padding: 30px;
border: 10px solid orange;
background-color: lightgreen;
overflow: auto; /* Для возможной полосы прокрутки */
height: 50px;
}<div id="element-to-measure" class="element">
Этот элемент имеет заданные размеры, отступы и границы, а также возможную полосу прокрутки.
Очень длинный текст для демонстрации полосы прокрутки.
</div>
<div id="output"></div>const element = document.input__1('element-to-measure');
const width = element.input__2;
document.input__3('output').textContent = 'Внутренняя ширина элемента: ' + width + 'px';Получение внутренней высоты элемента (clientHeight)
Получите внутреннюю высоту элемента `<div>` с id `element-to-measure`. Внутренняя высота включает в себя высоту контента и внутренние отступы, но исключает границы и горизонтальную полосу прокрутки. Выведите результат в элемент с id `output`.
.element {
height: 150px;
padding: 25px;
border: 7px solid purple;
background-color: lightyellow;
overflow-x: auto; /* Для возможной горизонтальной полосы прокрутки */
width: 100px;
}<div id="element-to-measure" class="element">
Этот элемент имеет заданные размеры, отступы и границы, а также возможную горизонтальную полосу прокрутки.
Очень длинный текст в одну строку для демонстрации горизонтальной полосы прокрутки.
</div>
<div id="output"></div>const element = document.input__1('element-to-measure');
const height = element.input__2;
document.input__3('output').textContent = 'Внутренняя высота элемента: ' + height + 'px';Получение размеров контента элемента (scrollWidth)
Получите полную ширину контента элемента `<div>` с id `scrollable-element`, включая контент, который не помещается в видимой области из-за прокрутки. Выведите результат в элемент с id `output`.
.scrollable {
width: 150px;
height: 80px;
border: 2px solid blue;
overflow: auto;
}<div id="scrollable-element" class="scrollable">
Очень длинный текст, который не помещается в заданную ширину и вызывает полосу прокрутки.
Это нужно для демонстрации scrollWidth.
</div>
<div id="output"></div>const element = document.input__1('scrollable-element');
const width = element.input__2;
document.input__3('output').textContent = 'Ширина контента (scrollWidth): ' + width + 'px';Получение высоты контента элемента (scrollHeight)
Получите полную высоту контента элемента `<div>` с id `scrollable-element`, включая контент, который не помещается в видимой области по вертикали из-за прокрутки. Выведите результат в элемент с id `output`.
.scrollable {
width: 100px;
height: 60px;
border: 2px solid red;
overflow: auto;
}<div id="scrollable-element" class="scrollable">
Очень длинный текст,
который не помещается в заданную высоту
и вызывает вертикальную полосу прокрутки.
Это нужно для демонстрации scrollHeight.
</div>
<div id="output"></div>const element = document.input__1('scrollable-element');
const height = element.input__2;
document.input__3('output').textContent = 'Высота контента (scrollHeight): ' + height + 'px';Получение позиции элемента относительно окна браузера (getBoundingClientRect)
Используйте метод `getBoundingClientRect()` для получения размеров и позиции элемента `<div>` с id `rect-element` относительно видимой области окна браузера. Выведите в элемент `output` значения `top`, `right`, `bottom`, `left`, `width` и `height`.
.rect {
width: 100px;
height: 100px;
background-color: gold;
position: absolute;
top: 50px;
left: 50px;
}<div id="rect-element" class="rect"></div>
<div id="output"></div>const element = document.input__1('rect-element');
const rect = element.input__2();
let outputText = 'Позиция элемента:\n';
outputText += 'top: ' + rect.input__3 + 'px\n';
outputText += 'right: ' + rect.input__4 + 'px\n';
outputText += 'bottom: ' + rect.input__5 + 'px\n';
outputText += 'left: ' + rect.input__6 + 'px\n';
outputText += 'width: ' + rect.input__7 + 'px\n';
outputText += 'height: ' + rect.input__8 + 'px';
document.input__9('output').textContent = outputText;Получение позиции элемента относительно родителя (offsetLeft, offsetTop)
Получите позицию элемента `<div>` с id `child-element` относительно его родительского элемента с id `parent-element`. Используйте свойства `offsetLeft` и `offsetTop`. Выведите результаты в элемент с id `output`.
#parent-element {
width: 300px;
height: 200px;
background-color: lightgray;
position: relative; /* Важно для offsetParent */
padding: 20px;
}
#child-element {
width: 100px;
height: 80px;
background-color: lightcoral;
position: absolute;
top: 30px;
left: 40px;
}<div id="parent-element">
<div id="child-element"></div>
</div>
<div id="output"></div>const childElement = document.input__1('child-element');
const offsetX = childElement.input__2;
const offsetY = childElement.input__3;
document.input__4('output').textContent = 'Смещение элемента:\noffsetLeft: ' + offsetX + 'px\noffsetTop: ' + offsetY + 'px';Получение размеров окна браузера (innerWidth, innerHeight)
Получите внутренние размеры окна браузера, то есть размеры видимой области страницы, исключая полосы прокрутки, панели инструментов браузера и т.д. Используйте свойства `innerWidth` и `innerHeight` объекта `window`. Выведите результаты в элемент с id `output`.
<div id="output"></div>const width = window.input__1;
const height = window.input__2;
document.input__3('output').textContent = 'Размеры окна браузера:\nВнутренняя ширина: ' + width + 'px\nВнутренняя высота: ' + height + 'px';Получение размеров всего окна браузера (outerWidth, outerHeight)
Получите внешние размеры окна браузера, то есть размеры всего окна, включая полосы прокрутки, панели инструментов браузера и т.д. Используйте свойства `outerWidth` и `outerHeight` объекта `window`. Выведите результаты в элемент с id `output`.
<div id="output"></div>const width = window.input__1;
const height = window.input__2;
document.input__3('output').textContent = 'Размеры всего окна браузера:\nВнешняя ширина: ' + width + 'px\nВнешняя высота: ' + height + 'px';