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

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

В этом тренажере вы попрактикуетесь изменять размеры HTML-элементов с помощью JavaScript. Вам будут представлены различные сценарии, от простого изменения ширины и высоты до более сложных манипуляций, таких как установка размеров в процентах, использование свойств `clientWidth`/`clientHeight`, `offsetWidth`/`offsetHeight`, а также работа со стилями. Каждое задание включает в себя готовый HTML-код и JavaScript-код с пропусками, которые вам нужно заполнить. Внимательно читайте условия и используйте свои знания DOM, чтобы добиться желаемого результата. Не забывайте, что размеры элементов могут зависеть от различных факторов, таких как тип элемента, его содержимое и применяемые к нему стили.

Список тем

Изменение ширины и высоты элемента

Задайте элементу с идентификатором "myDiv" ширину 300 пикселей и высоту 200 пикселей, используя JavaScript. Изменение размеров должно произойти сразу после загрузки страницы.

HTML

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

                      <div id="myDiv" style="background-color: lightblue;">Этот div нужно изменить</div>

<div id="myDiv" style="background-color: lightblue;">Этот div нужно изменить</div>

JavaScript

document.input__1("myDiv").style.width = input__2;
document.getElementById("myDiv").style.height = input__3;

                     document.input__1("myDiv").style.width = input__2;
document.getElementById("myDiv").style.height = input__3;

Используйте метод `getElementById` для получения элемента. Затем используйте свойства `style.width` и `style.height`, чтобы установить ширину и высоту элемента. Не забудьте указать единицы измерения (px).

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

Результат

Лог

Выполнить

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

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

Изменение ширины в процентах

Сделайте ширину элемента с id "myImage" равной 50% от ширины родительского элемента. Используйте JavaScript для установки ширины.

HTML

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

                      <div style="width: 600px;">
  <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Test Image">
</div>

<div style="width: 600px;">
  <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Test Image">
</div>

JavaScript

document.getElementById(input__1).style.input__2 = "50%";

                     document.getElementById(input__1).style.input__2 = "50%";

Получите элемент по ID (`getElementById`). Затем установите свойство `style.width` в значение "50%".

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

Результат

Лог

Выполнить

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

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

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

Получите фактическую ширину и высоту элемента с id "myBox" (в пикселях) и выведите их в консоль. Учтите, что элемент имеет внутренние отступы (padding).

CSS

#myBox {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  background-color: lightcoral;
}

HTML

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

                      <div id="myBox">Контент</div>

<div id="myBox">Контент</div>

JavaScript

let box = document.getElementById("myBox");
let width = box.input__1;
let height = box.input__2;
console.log("Ширина: " + width + "px, Высота: " + height + "px");

                     let box = document.getElementById("myBox");
let width = box.input__1;
let height = box.input__2;
console.log("Ширина: " + width + "px, Высота: " + height + "px");

Используйте `offsetWidth` и `offsetHeight` для получения полной ширины и высоты элемента, включая padding и border.

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

Результат

Лог

Выполнить

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

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

Изменение размеров при клике

При нажатии на кнопку с id "resizeButton", измените ширину элемента с id "resizableDiv" на 400 пикселей, а высоту на 300 пикселей.

CSS

#resizableDiv {
  background-color: lightgreen;
  width: 200px;
  height: 150px;
}

HTML

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

                      <div id="resizableDiv"></div>
<button id="resizeButton">Изменить размер</button>

<div id="resizableDiv"></div>
<button id="resizeButton">Изменить размер</button>

JavaScript

document.getElementById("resizeButton").addEventListener("click", function() {
  document.getElementById(input__1).style.width = input__2;
  document.getElementById("resizableDiv").style.input__3 = "300px";
});

                     document.getElementById("resizeButton").addEventListener("click", function() {
  document.getElementById(input__1).style.width = input__2;
  document.getElementById("resizableDiv").style.input__3 = "300px";
});

Добавьте обработчик события `click` к кнопке. Внутри обработчика получите элемент "resizableDiv" и измените его `style.width` и `style.height`.

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

Результат

Лог

Выполнить

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

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

Анимация изменения размеров

Плавно анимируйте изменение ширины элемента с id "animatedDiv" до 500 пикселей при наведении на него курсора мыши. При убирании курсора ширина должна плавно возвращаться к исходному значению (250px).

CSS

#animatedDiv {
  width: 250px;
  height: 100px;
  background-color: lightyellow;
  transition: width 0.5s ease;
}

HTML

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

                      <div id="animatedDiv"></div>

<div id="animatedDiv"></div>

JavaScript

const animatedDiv = document.getElementById("animatedDiv");

animatedDiv.addEventListener(input__1, function() {
  animatedDiv.style.width = "500px";
});

animatedDiv.addEventListener(input__2, function() {
  animatedDiv.style.width = "250px";
});

                     const animatedDiv = document.getElementById("animatedDiv");

animatedDiv.addEventListener(input__1, function() {
  animatedDiv.style.width = "500px";
});

animatedDiv.addEventListener(input__2, function() {
  animatedDiv.style.width = "250px";
});

Используйте CSS transitions для плавной анимации. Добавьте обработчики событий `mouseover` и `mouseout` к элементу. В `mouseover` устанавливайте ширину 500px, а в `mouseout` возвращайте к 250px.

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

Результат

Лог

Выполнить

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

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

Изменение высоты в зависимости от контента

Сделайте так, чтобы высота элемента с id "dynamicHeight" автоматически подстраивалась под его содержимое. Изначально у элемента нет содержимого, добавьте в него текст "Новый контент!" с помощью JavaScript.

CSS

#dynamicHeight {
 background-color: #f0f0f0;
 border: 1px solid #ccc;
 width: 300px;
}

HTML

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

                      <div id="dynamicHeight"></div>

<div id="dynamicHeight"></div>

JavaScript

let dynamicDiv = document.getElementById("dynamicHeight");
dynamicDiv.input__1 = "Новый контент!";
dynamicDiv.style.height = input__2;

                     let dynamicDiv = document.getElementById("dynamicHeight");
dynamicDiv.input__1 = "Новый контент!";
dynamicDiv.style.height = input__2;

Используйте свойство `style.height = "auto"`, чтобы высота элемента автоматически подстраивалась под содержимое. Для добавления текста используйте свойство `textContent`.

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

Результат

Лог

Выполнить

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

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

Ограничение максимальной ширины

Установите максимальную ширину элемента с id "maxWidthDiv" равной 100 пикселей. Даже если попытаться установить ширину больше, элемент не должен превышать это значение.

HTML

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

                      <div id="maxWidthDiv" style="background-color: lavender;">Этот div имеет максимальную ширину</div>

<div id="maxWidthDiv" style="background-color: lavender;">Этот div имеет максимальную ширину</div>

JavaScript

document.getElementById("maxWidthDiv").style.input__1 = "100px";

                     document.getElementById("maxWidthDiv").style.input__1 = "100px";

Используйте свойство `style.maxWidth`.

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

Результат

Лог

Выполнить

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

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

Изменение размеров изображения

Измените ширину и высоту изображения с id "resizableImage" на 200 пикселей каждое, используя JavaScript.

HTML

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

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

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

JavaScript

document.input__1("resizableImage").style.width = "200px";
document.getElementById("resizableImage").input__2.height = "200px";

                     document.input__1("resizableImage").style.width = "200px";
document.getElementById("resizableImage").input__2.height = "200px";

Получите элемент изображения по ID. Используйте свойства `style.width` и `style.height` для изменения размеров.

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

Результат

Лог

Выполнить

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

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

Использование clientWidth и clientHeight

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

CSS

#clientSizeDiv {
 width: 300px;
 height: 200px;
 padding: 20px;
 border: 10px solid black;
 overflow: auto; /* Добавляем полосы прокрутки */
}

HTML

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

                      <div id="clientSizeDiv">Этот div имеет padding, border и overflow.</div>

<div id="clientSizeDiv">Этот div имеет padding, border и overflow.</div>

JavaScript

let div = document.getElementById("clientSizeDiv");
let clientWidth = div.input__1;
let clientHeight = div.input__2;
console.log("Client Width: " + clientWidth + "px, Client Height: " + clientHeight + "px");

                     let div = document.getElementById("clientSizeDiv");
let clientWidth = div.input__1;
let clientHeight = div.input__2;
console.log("Client Width: " + clientWidth + "px, Client Height: " + clientHeight + "px");

Используйте свойства `clientWidth` и `clientHeight`.

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

Результат

Лог

Выполнить

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

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