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

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

В этом тренажере вы попрактикуетесь в получении вычисленных стилей HTML-элементов с помощью JavaScript. Вычисленные стили - это окончательные значения CSS-свойств, примененные к элементу после учета всех стилей (встроенных, из таблиц стилей, унаследованных). Вам будет предоставлен HTML-код, иногда CSS, и JavaScript-код с пропусками. Ваша задача - заполнить пропуски, чтобы получить нужные значения стилей или изменить их. Задания расположены в порядке возрастания сложности. Внимательно читайте условия и используйте `window.getComputedStyle()` для получения стилей.

Список тем

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

Получите вычисленную ширину элемента div с id "myDiv" и выведите значение в консоль. Ширина должна включать padding, но не border и margin.

CSS

#myDiv {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

HTML

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

                      <div id="myDiv">Содержимое</div>

<div id="myDiv">Содержимое</div>

JavaScript

const element = document.getElementById(input__1);
const styles = window.input__2(element);
console.log(styles.input__3);

                     const element = document.getElementById(input__1);
const styles = window.input__2(element);
console.log(styles.input__3);

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

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

Результат

Лог

Выполнить

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

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

Получение цвета текста

Получите вычисленный цвет текста элемента `p` с id "myParagraph" и выведите его в консоль.

CSS

#myParagraph {
  color: blue;
}

HTML

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

                      <p id="myParagraph">Этот текст синий.</p>

<p id="myParagraph">Этот текст синий.</p>

JavaScript

const paragraph = document.querySelector(input__1);
const computedStyles = input__2.getComputedStyle(paragraph);
console.log(input__3.color);

                     const paragraph = document.querySelector(input__1);
const computedStyles = input__2.getComputedStyle(paragraph);
console.log(input__3.color);

Используйте `window.getComputedStyle()` и свойство `color`.

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

Результат

Лог

Выполнить

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

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

Получение размера шрифта

Получите вычисленный размер шрифта (font-size) элемента `span` с классом "highlight" и выведите его в консоль.

CSS

.highlight {
  font-size: 24px;
}

HTML

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

                      <span class="highlight">Текст с увеличенным шрифтом</span>

<span class="highlight">Текст с увеличенным шрифтом</span>

JavaScript

const spanElement = document.input__1(input__2);
const spanStyles = window.getComputedStyle(input__3);
console.log(spanStyles.input__4);

                     const spanElement = document.input__1(input__2);
const spanStyles = window.getComputedStyle(input__3);
console.log(spanStyles.input__4);

Используйте `getComputedStyle()` и свойство `fontSize`.

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

Результат

Лог

Выполнить

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

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

Получение background-color

Получите вычисленный цвет фона элемента `div` с id "coloredDiv" и выведите его в консоль.

CSS

#coloredDiv {
  background-color: rgb(255, 0, 0);
}

HTML

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

                      <div id="coloredDiv">Этот div имеет красный фон.</div>

<div id="coloredDiv">Этот div имеет красный фон.</div>

JavaScript

const divElement = document.getElementById("coloredDiv");
const styles = window.getComputedStyle(input__1);
console.log(styles.input__2);

                     const divElement = document.getElementById("coloredDiv");
const styles = window.getComputedStyle(input__1);
console.log(styles.input__2);

Используйте `getComputedStyle()` и свойство `backgroundColor`.

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

Результат

Лог

Выполнить

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

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

Получение display

Получите вычисленное значение свойства `display` для элемента `p` с id "hiddenParagraph" и выведите его в консоль. Затем измените его на "block".

CSS

#hiddenParagraph {
  display: none;
}

HTML

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

                      <p id="hiddenParagraph">Этот параграф скрыт.</p>

<p id="hiddenParagraph">Этот параграф скрыт.</p>

JavaScript

const hiddenParagraph = document.getElementById("hiddenParagraph");
const style = window.getComputedStyle(hiddenParagraph);
console.log(style.display);
hiddenParagraph.input__1.display = input__2;

                     const hiddenParagraph = document.getElementById("hiddenParagraph");
const style = window.getComputedStyle(hiddenParagraph);
console.log(style.display);
hiddenParagraph.input__1.display = input__2;

Используйте `getComputedStyle()` для получения, а затем присвойте новое значение свойству `display` напрямую.

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

Результат

Лог

Выполнить

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

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

Получение opacity

Получите значение opacity для элемента с id "fadedImage" и выведите в консоль. Затем измените его на 0.5.

CSS

#fadedImage {
  opacity: 1;
}

HTML

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

                      <img id="fadedImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Изображение">

<img id="fadedImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Изображение">

JavaScript

const image = document.getElementById(input__1);
const computedStyle = window.getComputedStyle(image);
console.log(input__2);
image.style.opacity = input__3;

                     const image = document.getElementById(input__1);
const computedStyle = window.getComputedStyle(image);
console.log(input__2);
image.style.opacity = input__3;

Используйте `getComputedStyle()` для получения значения и свойство `style.opacity` для изменения.

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

Результат

Лог

Выполнить

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

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

Получение всех стилей

Выведите в консоль *все* вычисленные стили элемента `div` с id "styledDiv".

CSS

#styledDiv {
  width: 100px;
  height: 50px;
  background-color: yellow;
  border: 2px solid green;
}

HTML

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

                      <div id="styledDiv">Стилизованный Div</div>

<div id="styledDiv">Стилизованный Div</div>

JavaScript

const div = document.getElementById("styledDiv");
const allStyles = input__1;
console.log(input__2);

                     const div = document.getElementById("styledDiv");
const allStyles = input__1;
console.log(input__2);

Используйте `window.getComputedStyle()` и выведите полученный объект в консоль.

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

Результат

Лог

Выполнить

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

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

Получение высоты с учетом padding

Получите вычисленную *полную* высоту элемента (включая padding) с id "paddedDiv" и выведите в консоль.

CSS

#paddedDiv {
 height: 50px;
 padding: 15px;
}

HTML

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

                      <div id="paddedDiv">Div с padding</div>

<div id="paddedDiv">Div с padding</div>

JavaScript

const element = document.getElementById(input__1);
const styles = window.getComputedStyle(element);
console.log(input__2);

                     const element = document.getElementById(input__1);
const styles = window.getComputedStyle(element);
console.log(input__2);

Используйте `getComputedStyle()` и свойство `height`. Оно вернет высоту с учетом padding.

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

Результат

Лог

Выполнить

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

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

Получение `font-family`

Получите используемый шрифт (font-family) для элемента `p` с классом "customFont" и выведите его в консоль.

CSS

.customFont {
 font-family: Arial, sans-serif;
}

HTML

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

                      <p class="customFont">Текст с нестандартным шрифтом</p>

<p class="customFont">Текст с нестандартным шрифтом</p>

JavaScript

const paragraph = document.querySelector(input__1);
const styles = window.getComputedStyle(input__2);
console.log(styles.input__3);

                     const paragraph = document.querySelector(input__1);
const styles = window.getComputedStyle(input__2);
console.log(styles.input__3);

Используйте `getComputedStyle()` и свойство `fontFamily`.

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

Результат

Лог

Выполнить

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

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

Получение `border-width`

Получите толщину границы (border-width) элемента `div` с id "borderedDiv" и выведите её в консоль.

CSS

#borderedDiv {
 border: 3px solid black;
}

HTML

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

                      <div id="borderedDiv">Div с границей</div>

<div id="borderedDiv">Div с границей</div>

JavaScript

const divElement = document.getElementById(input__1);
const computedStyles = window.getComputedStyle(divElement);
console.log(input__2);

                     const divElement = document.getElementById(input__1);
const computedStyles = window.getComputedStyle(divElement);
console.log(input__2);

Используйте `getComputedStyle()` и свойство `borderWidth`.

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

Результат

Лог

Выполнить

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

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

Получение `margin-top`

Получите значение верхнего отступа (margin-top) элемента `p` с id "paragraphWithMargin" и выведите его в консоль.

CSS

#paragraphWithMargin {
 margin-top: 25px;
}

HTML

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

                      <p id="paragraphWithMargin">Параграф с верхним отступом</p>

<p id="paragraphWithMargin">Параграф с верхним отступом</p>

JavaScript

const paragraph = document.getElementById(input__1);
const styles = window.getComputedStyle(input__2);
console.log(styles.input__3);

                     const paragraph = document.getElementById(input__1);
const styles = window.getComputedStyle(input__2);
console.log(styles.input__3);

Используйте `getComputedStyle()` и свойство `marginTop`.

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

Результат

Лог

Выполнить

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

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

Получение `text-align`

Получите выравнивание текста (text-align) для элемента `div` с id "centeredText" и выведите его в консоль.

CSS

#centeredText {
 text-align: center;
}

HTML

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

                      <div id="centeredText">Текст по центру</div>

<div id="centeredText">Текст по центру</div>

JavaScript

const div = document.getElementById(input__1);
const style = window.getComputedStyle(div);
console.log(input__2);

                     const div = document.getElementById(input__1);
const style = window.getComputedStyle(div);
console.log(input__2);

Используйте `getComputedStyle()` и свойство `textAlign`.

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

Результат

Лог

Выполнить

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

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

Получение `line-height`

Получите межстрочный интервал (line-height) для элемента `p` с классом "spacedText" и выведите его в консоль.

CSS

.spacedText {
 line-height: 1.5;
}

HTML

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

                      <p class="spacedText">Текст с увеличенным межстрочным интервалом</p>

<p class="spacedText">Текст с увеличенным межстрочным интервалом</p>

JavaScript

const paragraph = document.querySelector(input__1);
const styles = window.getComputedStyle(input__2);
console.log(styles.input__3);

                     const paragraph = document.querySelector(input__1);
const styles = window.getComputedStyle(input__2);
console.log(styles.input__3);

Используйте `getComputedStyle()` и свойство `lineHeight`.

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

Результат

Лог

Выполнить

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

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