Получение размеров элемента: Тренажер JavaScript: Покоряем HTML DOM

Получение полной ширины элемента

В этом задании вам нужно получить полную ширину элемента `<div>` с идентификатором `element-to-measure`. Полная ширина включает в себя ширину контента, внутренние отступы (padding) и границы (border). Результат должен быть выведен в элемент с id `output`.

CSS

.element {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  background-color: lightblue;
}

HTML

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

                      <div id="element-to-measure" class="element">
  Этот элемент имеет заданные размеры, отступы и границы.
</div>
<div id="output"></div>

<div id="element-to-measure" class="element">
  Этот элемент имеет заданные размеры, отступы и границы.
</div>
<div id="output"></div>

JavaScript

const element = document.input__1('element-to-measure');
const width = element.input__2;
document.input__3('output').textContent = 'Ширина элемента: ' + width + 'px';

                     const element = document.input__1('element-to-measure');
const width = element.input__2;
document.input__3('output').textContent = 'Ширина элемента: ' + width + 'px';

Для получения полной ширины элемента используйте свойство `offsetWidth`. Это свойство возвращает числовое значение, представляющее ширину элемента в пикселях, включая padding, border и вертикальную полосу прокрутки (если она присутствует и является видимой). Вам нужно получить элемент по его id и затем обратиться к свойству `offsetWidth`.

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

Результат

Лог

Выполнить

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

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

Получение полной высоты элемента

Аналогично предыдущему заданию, получите полную высоту элемента `<div>` с id `element-to-measure`. Полная высота включает в себя высоту контента, внутренние отступы и границы. Выведите результат в элемент с id `output`.

CSS

.element {
  height: 100px;
  padding: 15px;
  border: 3px solid green;
  background-color: lightcoral;
}

HTML

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

                      <div id="element-to-measure" class="element">
  Этот элемент имеет заданные размеры, отступы и границы.
</div>
<div id="output"></div>

<div id="element-to-measure" class="element">
  Этот элемент имеет заданные размеры, отступы и границы.
</div>
<div id="output"></div>

JavaScript

const element = document.input__1('element-to-measure');
const height = element.input__2;
document.input__3('output').textContent = 'Высота элемента: ' + height + 'px';

                     const element = document.input__1('element-to-measure');
const height = element.input__2;
document.input__3('output').textContent = 'Высота элемента: ' + height + 'px';

Для получения полной высоты элемента используйте свойство `offsetHeight`. Оно работает аналогично `offsetWidth`, но для высоты. Вам нужно получить элемент и использовать свойство `offsetHeight`.

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

Результат

Лог

Выполнить

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

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

Получение внутренней ширины элемента (clientWidth)

Теперь получите внутреннюю ширину элемента `<div>` с id `element-to-measure`. Внутренняя ширина включает в себя только ширину контента и внутренние отступы (padding), но исключает границы (border) и полосу прокрутки. Выведите результат в элемент с id `output`.

CSS

.element {
  width: 300px;
  padding: 30px;
  border: 10px solid orange;
  background-color: lightgreen;
  overflow: auto; /* Для возможной полосы прокрутки */
  height: 50px;
}

HTML

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

                      <div id="element-to-measure" class="element">
  Этот элемент имеет заданные размеры, отступы и границы, а также возможную полосу прокрутки.
  Очень длинный текст для демонстрации полосы прокрутки.
</div>
<div id="output"></div>

<div id="element-to-measure" class="element">
  Этот элемент имеет заданные размеры, отступы и границы, а также возможную полосу прокрутки.
  Очень длинный текст для демонстрации полосы прокрутки.
</div>
<div id="output"></div>

JavaScript

const element = document.input__1('element-to-measure');
const width = element.input__2;
document.input__3('output').textContent = 'Внутренняя ширина элемента: ' + width + 'px';

                     const element = document.input__1('element-to-measure');
const width = element.input__2;
document.input__3('output').textContent = 'Внутренняя ширина элемента: ' + width + 'px';

Для получения внутренней ширины элемента используйте свойство `clientWidth`. Оно отличается от `offsetWidth` тем, что не включает границы и полосу прокрутки. Получите элемент и используйте свойство `clientWidth`.

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

Результат

Лог

Выполнить

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

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

Получение внутренней высоты элемента (clientHeight)

Получите внутреннюю высоту элемента `<div>` с id `element-to-measure`. Внутренняя высота включает в себя высоту контента и внутренние отступы, но исключает границы и горизонтальную полосу прокрутки. Выведите результат в элемент с id `output`.

CSS

.element {
  height: 150px;
  padding: 25px;
  border: 7px solid purple;
  background-color: lightyellow;
  overflow-x: auto; /* Для возможной горизонтальной полосы прокрутки */
  width: 100px;
}

HTML

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

                      <div id="element-to-measure" class="element">
  Этот элемент имеет заданные размеры, отступы и границы, а также возможную горизонтальную полосу прокрутки.
  Очень длинный текст в одну строку для демонстрации горизонтальной полосы прокрутки.
</div>
<div id="output"></div>

<div id="element-to-measure" class="element">
  Этот элемент имеет заданные размеры, отступы и границы, а также возможную горизонтальную полосу прокрутки.
  Очень длинный текст в одну строку для демонстрации горизонтальной полосы прокрутки.
</div>
<div id="output"></div>

JavaScript

const element = document.input__1('element-to-measure');
const height = element.input__2;
document.input__3('output').textContent = 'Внутренняя высота элемента: ' + height + 'px';

                     const element = document.input__1('element-to-measure');
const height = element.input__2;
document.input__3('output').textContent = 'Внутренняя высота элемента: ' + height + 'px';

Используйте свойство `clientHeight` для получения внутренней высоты элемента. Аналогично `clientWidth`, оно не учитывает границы. Получите элемент и примените свойство `clientHeight`.

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

Результат

Лог

Выполнить

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

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

Получение размеров контента элемента (scrollWidth)

Получите полную ширину контента элемента `<div>` с id `scrollable-element`, включая контент, который не помещается в видимой области из-за прокрутки. Выведите результат в элемент с id `output`.

CSS

.scrollable {
  width: 150px;
  height: 80px;
  border: 2px solid blue;
  overflow: auto;
}

HTML

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

                      <div id="scrollable-element" class="scrollable">
  Очень длинный текст, который не помещается в заданную ширину и вызывает полосу прокрутки.
  Это нужно для демонстрации scrollWidth.
</div>
<div id="output"></div>

<div id="scrollable-element" class="scrollable">
  Очень длинный текст, который не помещается в заданную ширину и вызывает полосу прокрутки.
  Это нужно для демонстрации scrollWidth.
</div>
<div id="output"></div>

JavaScript

const element = document.input__1('scrollable-element');
const width = element.input__2;
document.input__3('output').textContent = 'Ширина контента (scrollWidth): ' + width + 'px';

                     const element = document.input__1('scrollable-element');
const width = element.input__2;
document.input__3('output').textContent = 'Ширина контента (scrollWidth): ' + width + 'px';

Для получения полной ширины контента, включая скрытую часть из-за прокрутки, используйте свойство `scrollWidth`. Это свойство полезно для элементов с прокруткой. Получите элемент и используйте свойство `scrollWidth`.

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

Результат

Лог

Выполнить

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

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

Получение высоты контента элемента (scrollHeight)

Получите полную высоту контента элемента `<div>` с id `scrollable-element`, включая контент, который не помещается в видимой области по вертикали из-за прокрутки. Выведите результат в элемент с id `output`.

CSS

.scrollable {
  width: 100px;
  height: 60px;
  border: 2px solid red;
  overflow: auto;
}

HTML

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

                      <div id="scrollable-element" class="scrollable">
  Очень длинный текст,
  который не помещается в заданную высоту
  и вызывает вертикальную полосу прокрутки.
  Это нужно для демонстрации scrollHeight.
</div>
<div id="output"></div>

<div id="scrollable-element" class="scrollable">
  Очень длинный текст,
  который не помещается в заданную высоту
  и вызывает вертикальную полосу прокрутки.
  Это нужно для демонстрации scrollHeight.
</div>
<div id="output"></div>

JavaScript

const element = document.input__1('scrollable-element');
const height = element.input__2;
document.input__3('output').textContent = 'Высота контента (scrollHeight): ' + height + 'px';

                     const element = document.input__1('scrollable-element');
const height = element.input__2;
document.input__3('output').textContent = 'Высота контента (scrollHeight): ' + height + 'px';

Для получения полной высоты контента, включая скрытую часть по вертикали из-за прокрутки, используйте свойство `scrollHeight`. Аналогично `scrollWidth`, но для высоты. Получите элемент и используйте свойство `scrollHeight`.

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

Результат

Лог

Выполнить

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

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

Получение позиции элемента относительно окна браузера (getBoundingClientRect)

Используйте метод `getBoundingClientRect()` для получения размеров и позиции элемента `<div>` с id `rect-element` относительно видимой области окна браузера. Выведите в элемент `output` значения `top`, `right`, `bottom`, `left`, `width` и `height`.

CSS

.rect {
  width: 100px;
  height: 100px;
  background-color: gold;
  position: absolute;
  top: 50px;
  left: 50px;
}

HTML

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

                      <div id="rect-element" class="rect"></div>
<div id="output"></div>

<div id="rect-element" class="rect"></div>
<div id="output"></div>

JavaScript

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;

                     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;

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

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

Результат

Лог

Выполнить

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

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

Получение позиции элемента относительно родителя (offsetLeft, offsetTop)

Получите позицию элемента `<div>` с id `child-element` относительно его родительского элемента с id `parent-element`. Используйте свойства `offsetLeft` и `offsetTop`. Выведите результаты в элемент с id `output`.

CSS

#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;
}

HTML

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

                      <div id="parent-element">
  <div id="child-element"></div>
</div>
<div id="output"></div>

<div id="parent-element">
  <div id="child-element"></div>
</div>
<div id="output"></div>

JavaScript

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';

                     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';

Свойства `offsetLeft` и `offsetTop` возвращают смещение элемента относительно его `offsetParent` элемента (обычно ближайшего позиционированного предка). В данном случае `parent-element` является `offsetParent` для `child-element`. Получите дочерний элемент и используйте свойства `offsetLeft` и `offsetTop`.

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

Результат

Лог

Выполнить

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

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

Получение размеров окна браузера (innerWidth, innerHeight)

Получите внутренние размеры окна браузера, то есть размеры видимой области страницы, исключая полосы прокрутки, панели инструментов браузера и т.д. Используйте свойства `innerWidth` и `innerHeight` объекта `window`. Выведите результаты в элемент с id `output`.

HTML

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

                      <div id="output"></div>

<div id="output"></div>

JavaScript

const width = window.input__1;
const height = window.input__2;
document.input__3('output').textContent = 'Размеры окна браузера:\nВнутренняя ширина: ' + width + 'px\nВнутренняя высота: ' + height + 'px';

                     const width = window.input__1;
const height = window.input__2;
document.input__3('output').textContent = 'Размеры окна браузера:\nВнутренняя ширина: ' + width + 'px\nВнутренняя высота: ' + height + 'px';

Свойства `window.innerWidth` и `window.innerHeight` предоставляют размеры видимой области окна браузера. Обратитесь к объекту `window` и используйте эти свойства.

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

Результат

Лог

Выполнить

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

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

Получение размеров всего окна браузера (outerWidth, outerHeight)

Получите внешние размеры окна браузера, то есть размеры всего окна, включая полосы прокрутки, панели инструментов браузера и т.д. Используйте свойства `outerWidth` и `outerHeight` объекта `window`. Выведите результаты в элемент с id `output`.

HTML

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

                      <div id="output"></div>

<div id="output"></div>

JavaScript

const width = window.input__1;
const height = window.input__2;
document.input__3('output').textContent = 'Размеры всего окна браузера:\nВнешняя ширина: ' + width + 'px\nВнешняя высота: ' + height + 'px';

                     const width = window.input__1;
const height = window.input__2;
document.input__3('output').textContent = 'Размеры всего окна браузера:\nВнешняя ширина: ' + width + 'px\nВнешняя высота: ' + height + 'px';

Свойства `window.outerWidth` и `window.outerHeight` предоставляют размеры всего окна браузера. Аналогично предыдущему заданию, обратитесь к объекту `window` и используйте эти свойства.

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

Результат

Лог

Выполнить

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

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