Замена одного класса другим. Альтернатива: удалить старый, добавить новый.: Тренажер JavaScript: Покоряем HTML DOM

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

В этом блоке заданий вы попрактикуетесь в замене CSS классов элементам веб-страницы с помощью JavaScript. Каждое задание представляет собой небольшую интерактивную задачу, где вам нужно будет дописать JavaScript код, чтобы изменить класс элемента и увидеть результат в реальном времени. Вы научитесь использовать различные методы для работы с классами, такие как `classList.add()`, `classList.remove()` и `classList.replace()`, а также узнаете, как манипулировать атрибутом `className`. Задания помогут вам понять, как динамически управлять стилями элементов на странице, что является ключевым навыком в веб-разработке.

Список тем

Модуль 1: Основы выбора элементов
Модуль 2: Манипуляция содержимым
Модуль 3: Работа с атрибутами
Модуль 4: Управление классами
- Добавление класса элементу.
- Удаление класса у элемента.
- Переключение класса.
- Проверка наличия класса у элемента.
- Замена одного класса другим. Альтернатива: удалить старый, добавить новый..
- Работа с несколькими классами одновременно.
Модуль 5: Управление стилями
Модуль 6: Создание и удаление элементов
Модуль 7: Обработка событий
Модуль 8: Работа с формами
Модуль 9: Продвинутые манипуляции
Модуль 10: Работа с размерами и прокруткой
Модуль 11: Работа с медиа-элементами
- Создание простой галереи изображений.
- Работа с Canvas.
Модуль 12: Практические задания
- Создание интерактивного списка задач (todo list).
- Создание простого калькулятора.

Замена класса для абзаца

Замените класс "initial" на класс "highlighted" у абзаца с идентификатором "myParagraph".

CSS

.initial {
  color: black;
}

.highlighted {
  color: blue;
  font-weight: bold;
}

HTML

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

                      <p id="myParagraph" class="initial">Этот текст имеет класс "initial".</p>

<p id="myParagraph" class="initial">Этот текст имеет класс "initial".</p>

JavaScript

document.input__1("myParagraph").classList.input__2("initial");
document.input__3("myParagraph").classList.input__4("highlighted");

                     document.input__1("myParagraph").classList.input__2("initial");
document.input__3("myParagraph").classList.input__4("highlighted");

Используйте метод `document.getElementById()` для доступа к абзацу. Затем, используя свойство `classList`, удалите класс "initial" и добавьте класс "highlighted".

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

Результат

Лог

Выполнить

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

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

Замена класса у кнопки при клике

Добавьте обработчик событий на кнопку. При клике на кнопку с id "myButton" замените класс "default-button" на класс "active-button".

CSS

.default-button {
  background-color: lightgray;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.active-button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

HTML

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

                      <button id="myButton" class="default-button">Нажми меня</button>

<button id="myButton" class="default-button">Нажми меня</button>

JavaScript

const button = document.input__1("myButton");
button.addEventListener("click", function() {
  button.classList.input__2("default-button", input__3);
});

                     const button = document.input__1("myButton");
button.addEventListener("click", function() {
  button.classList.input__2("default-button", input__3);
});

Сначала получите доступ к кнопке по ее id. Затем добавьте обработчик события 'click'. Внутри обработчика используйте `classList.replace()` для замены классов.

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

Результат

Лог

Выполнить

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

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

Переключение классов для изображения

При клике на изображение с id "myImage" переключайте классы "normal-image" и "zoomed-image". Если класс "normal-image" есть, замените его на "zoomed-image", и наоборот.

CSS

.normal-image {
  width: 200px;
  height: auto;
  transition: width 0.3s;
}

.zoomed-image {
  width: 300px;
  height: auto;
  transition: width 0.3s;
}

HTML

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

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

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

JavaScript

const image = document.input__1("myImage");
image.addEventListener("click", function() {
  image.classList.input__2("zoomed-image");
});

                     const image = document.input__1("myImage");
image.addEventListener("click", function() {
  image.classList.input__2("zoomed-image");
});

Получите изображение по id. Добавьте обработчик 'click'. Внутри обработчика используйте `classList.toggle()` для переключения классов.

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

Результат

Лог

Выполнить

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

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

Замена класса у нескольких элементов

Замените класс "item-normal" на "item-highlight" у всех элементов списка `li`.

CSS

.item-normal {
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

.item-highlight {
  padding: 10px;
  background-color: lightyellow;
  border-bottom: 2px solid orange;
}

HTML

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

                      <ul>
  <li class="item-normal">Пункт 1</li>
  <li class="item-normal">Пункт 2</li>
  <li class="item-normal">Пункт 3</li>
</ul>

<ul>
  <li class="item-normal">Пункт 1</li>
  <li class="item-normal">Пункт 2</li>
  <li class="item-normal">Пункт 3</li>
</ul>

JavaScript

const items = document.input__1("li.item-normal");
items.forEach(item => {
  item.classList.input__2("item-normal");
  item.classList.input__3("item-highlight");
});

                     const items = document.input__1("li.item-normal");
items.forEach(item => {
  item.classList.input__2("item-normal");
  item.classList.input__3("item-highlight");
});

Используйте `document.querySelectorAll()` для получения всех элементов `li` с классом "item-normal". Затем в цикле переберите все найденные элементы и замените класс.

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

Результат

Лог

Выполнить

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

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

Условная замена класса в зависимости от текста

Для абзаца с id "textBlock" проверьте его текстовое содержимое. Если текст содержит слово "ошибка", замените класс "text-normal" на "text-error".

CSS

.text-normal {
  color: black;
}

.text-error {
  color: red;
  font-weight: bold;
}

HTML

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

                      <p id="textBlock" class="text-normal">Это обычный текст.</p>

<p id="textBlock" class="text-normal">Это обычный текст.</p>

JavaScript

const textBlock = document.input__1("textBlock");
if (textBlock.textContent.input__2("ошибка")) {
  textBlock.classList.input__3("text-normal");
  textBlock.classList.input__4("text-error");
}

                     const textBlock = document.input__1("textBlock");
if (textBlock.textContent.input__2("ошибка")) {
  textBlock.classList.input__3("text-normal");
  textBlock.classList.input__4("text-error");
}

Получите абзац по id. Проверьте, содержит ли его `textContent` слово "ошибка" с помощью метода `includes()`. В зависимости от результата условия, замените классы.

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

Результат

Лог

Выполнить

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

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

Замена класса с использованием className

Замените класс "box-default" на "box-highlight" у элемента div с id "myBox", используя свойство `className`.

CSS

.box-default {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid blue;
}

.box-highlight {
  width: 150px;
  height: 150px;
  background-color: orange;
  border: 2px solid red;
}

HTML

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

                      <div id="myBox" class="box-default"></div>

<div id="myBox" class="box-default"></div>

JavaScript

const box = document.input__1("myBox");
box.input__2 = input__3;

                     const box = document.input__1("myBox");
box.input__2 = input__3;

Получите div элемент по id. Присвойте свойству `className` новое значение, равное классу "box-highlight". Обратите внимание, что при использовании `className` старые классы будут полностью перезаписаны.

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

Результат

Лог

Выполнить

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

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

Добавление и удаление классов по очереди

При клике на кнопку с id "sequenceButton" поочередно добавляйте и удаляйте классы "step-one" и "step-two" у абзаца с id "sequenceText". При первом клике добавьте "step-one", при втором удалите "step-one" и добавьте "step-two", при третьем удалите "step-two" и добавьте "step-one", и так далее.

CSS

.step-one {
  background-color: lightcoral;
  padding: 10px;
}

.step-two {
  background-color: lightseagreen;
  color: white;
  padding: 10px;
}

HTML

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

                      <button id="sequenceButton">Следующий шаг</button>
<p id="sequenceText">Текст для изменения класса</p>

<button id="sequenceButton">Следующий шаг</button>
<p id="sequenceText">Текст для изменения класса</p>

JavaScript

const button = document.input__1("sequenceButton");
const text = document.input__2("sequenceText");
let step = 1;

button.addEventListener("click", function() {
  if (step === 1) {
    text.classList.input__3("step-one");
    text.classList.input__4("step-two");
    step = 2;
  } else {
    text.classList.input__5("step-two");
    text.classList.input__6("step-one");
    step = 1;
  }
});

                     const button = document.input__1("sequenceButton");
const text = document.input__2("sequenceText");
let step = 1;

button.addEventListener("click", function() {
  if (step === 1) {
    text.classList.input__3("step-one");
    text.classList.input__4("step-two");
    step = 2;
  } else {
    text.classList.input__5("step-two");
    text.classList.input__6("step-one");
    step = 1;
  }
});

Заведите переменную-счетчик, чтобы отслеживать текущий шаг. В обработчике клика на кнопке, в зависимости от значения счетчика, добавляйте или удаляйте соответствующие классы, используя `classList.add()` и `classList.remove()`. Не забудьте увеличивать счетчик после каждого клика.

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

Результат

Лог

Выполнить

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

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

Замена класса родительскому элементу

При наведении мыши на кнопку с id "parentButton", замените класс "parent-normal" на "parent-highlight" у ее родительского элемента.

CSS

.parent-normal {
  padding: 10px;
  border: 1px solid black;
}

.parent-highlight {
  padding: 20px;
  background-color: lightgreen;
  border: 2px solid green;
}

HTML

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

                      <div id="parentDiv" class="parent-normal">
  <button id="parentButton">Наведи на меня</button>
</div>

<div id="parentDiv" class="parent-normal">
  <button id="parentButton">Наведи на меня</button>
</div>

JavaScript

const button = document.input__1("parentButton");
button.addEventListener("mouseover", function() {
  const parent = button.input__2;
  parent.classList.input__3("parent-normal");
  parent.classList.input__4("parent-highlight");
});

                     const button = document.input__1("parentButton");
button.addEventListener("mouseover", function() {
  const parent = button.input__2;
  parent.classList.input__3("parent-normal");
  parent.classList.input__4("parent-highlight");
});

Получите кнопку по id. Добавьте обработчик события 'mouseover'. Внутри обработчика получите родительский элемент кнопки с помощью свойства `parentElement`. Затем замените класс у родительского элемента.

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

Результат

Лог

Выполнить

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

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