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

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

В этом разделе вы попрактикуетесь в добавлении классов элементам HTML, используя JavaScript. Каждое задание представляет собой небольшую задачу, где вам нужно дополнить JavaScript код, чтобы изменить стилизацию элементов на странице. Вы увидите результат своих действий сразу после выполнения кода. Задания начинаются с простых и постепенно усложняются, чтобы помочь вам лучше понять и закрепить материал. Внимательно читайте описания заданий и используйте подсказки, если возникнут трудности.

Список тем

Задание 1: Добавление класса к элементу по ID

Добавьте класс "highlight" к параграфу с идентификатором "myParagraph". Класс "highlight" уже определен в CSS и меняет цвет фона элемента.

CSS

.highlight {
  background-color: yellow;
}

HTML

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

                      <p id="myParagraph">Это параграф, к которому нужно добавить класс.</p>

<p id="myParagraph">Это параграф, к которому нужно добавить класс.</p>

JavaScript

document.input__1("myParagraph").classList.input__2("highlight");

                     document.input__1("myParagraph").classList.input__2("highlight");

Используйте метод `document.getElementById()` для выбора элемента по ID и свойство `classList.add()` для добавления класса.

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

Результат

Лог

Выполнить

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

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

Задание 2: Добавление класса к кнопке

Добавьте класс "active" к кнопке, используя `querySelector`. Класс "active" изменяет цвет текста кнопки.

CSS

.active {
  color: red;
}

HTML

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

                      <button>Нажми меня</button>

<button>Нажми меня</button>

JavaScript

document.input__1('button').classList.input__2('active');

                     document.input__1('button').classList.input__2('active');

Используйте `document.querySelector('button')` для выбора кнопки и `classList.add('active')` для добавления класса.

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

Результат

Лог

Выполнить

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

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

Задание 3: Добавление класса к нескольким элементам

Добавьте класс "bold-text" ко всем элементам списка `li`. Класс "bold-text" делает текст жирным.

CSS

.bold-text {
  font-weight: bold;
}

HTML

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

                      <ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

JavaScript

const listItems = document.input__1('li');
listItems.input__2(item => {
  item.classList.input__3('bold-text');
});

                     const listItems = document.input__1('li');
listItems.input__2(item => {
  item.classList.input__3('bold-text');
});

Используйте `document.querySelectorAll('li')` для выбора всех элементов `li` и цикл `forEach` для добавления класса каждому элементу.

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

Результат

Лог

Выполнить

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

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

Задание 4: Добавление класса по условию

Если текст параграфа содержит слово "важно", добавьте ему класс "important". Класс "important" меняет цвет текста на красный.

CSS

.important {
  color: red;
}

HTML

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

                      <p id="conditionalParagraph">Этот параграф содержит важное сообщение.</p>

<p id="conditionalParagraph">Этот параграф содержит важное сообщение.</p>

JavaScript

const paragraph = document.input__1('conditionalParagraph');
const text = paragraph.input__2;
if (text.input__3('важно')) {
  paragraph.classList.input__4('important');
}

                     const paragraph = document.input__1('conditionalParagraph');
const text = paragraph.input__2;
if (text.input__3('важно')) {
  paragraph.classList.input__4('important');
}

Получите текст параграфа с помощью `textContent`. Используйте условный оператор `if` и метод `includes()` для проверки наличия слова "важно".

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

Результат

Лог

Выполнить

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

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

Задание 5: Переключение класса (toggle)

При каждом выполнении кода, класс "toggle-class" должен переключаться у кнопки. Если класса нет - он добавляется, если есть - удаляется. Класс "toggle-class" меняет цвет фона кнопки.

CSS

.toggle-class {
  background-color: lightblue;
}

HTML

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

                      <button id="toggleButton">Переключить класс</button>

<button id="toggleButton">Переключить класс</button>

JavaScript

document.input__1('toggleButton').classList.input__2('toggle-class');

                     document.input__1('toggleButton').classList.input__2('toggle-class');

Используйте метод `classList.toggle('toggle-class')` для переключения класса.

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

Результат

Лог

Выполнить

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

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

Задание 6: Добавление класса к родительскому элементу

Найдите родительский элемент для кнопки и добавьте ему класс "parent-highlight". Класс "parent-highlight" добавляет границу к элементу.

CSS

.parent-highlight {
  border: 2px solid green;
}

HTML

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

                      <div id="parentDiv">
  <button>Кнопка</button>
</div>

<div id="parentDiv">
  <button>Кнопка</button>
</div>

JavaScript

const button = document.input__1('button');
const parent = button.input__2;
parent.classList.input__3('parent-highlight');

                     const button = document.input__1('button');
const parent = button.input__2;
parent.classList.input__3('parent-highlight');

Используйте `document.querySelector('button')` для выбора кнопки, свойство `parentElement` для получения родительского элемента и `classList.add('parent-highlight')` для добавления класса.

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

Результат

Лог

Выполнить

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

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

Задание 7: Добавление класса к текущему элементу (this)

Добавьте класс "clicked" к элементу `div` при клике на него. Класс "clicked" изменяет цвет текста.

CSS

.clicked {
  color: blue;
}

HTML

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

                      <div id="clickableDiv">Нажми на меня</div>

<div id="clickableDiv">Нажми на меня</div>

JavaScript

const divElement = document.input__1('#clickableDiv');
divElement.addEventListener('click', function() {
  this.classList.input__2('clicked');
});

                     const divElement = document.input__1('#clickableDiv');
divElement.addEventListener('click', function() {
  this.classList.input__2('clicked');
});

Используйте `document.querySelector('div')` для выбора элемента `div`. Добавьте обработчик события `click`. Внутри обработчика используйте `this` для доступа к текущему элементу и `classList.add('clicked')` для добавления класса.

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

Результат

Лог

Выполнить

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

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

Задание 8: Добавление класса с задержкой

Добавьте класс "delayed" к параграфу через 2 секунды после загрузки страницы. Класс "delayed" изменяет размер шрифта.

CSS

.delayed {
  font-size: 20px;
}

HTML

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

                      <p id="delayedParagraph">Этот текст изменит размер шрифта через 2 секунды.</p>

<p id="delayedParagraph">Этот текст изменит размер шрифта через 2 секунды.</p>

JavaScript

setTimeout(function() {
  document.input__1('delayedParagraph').classList.input__2('delayed');
}, input__3);

                     setTimeout(function() {
  document.input__1('delayedParagraph').classList.input__2('delayed');
}, input__3);

Используйте `setTimeout` для задержки выполнения кода. Внутри `setTimeout` выберите параграф по ID и добавьте класс "delayed".

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

Результат

Лог

Выполнить

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

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