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

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

В этом разделе вы освоите ключевые навыки работы с DOM в Javascript, фокусируясь на динамическом изменении стилей элементов путем удаления CSS классов. Вы начнете с простых задач, где нужно будет удалить один класс у элемента, и постепенно перейдете к более сложным сценариям, включая удаление нескольких классов, удаление классов у нескольких элементов и условное удаление классов. Эти упражнения помогут вам понять, как Javascript взаимодействует с HTML и CSS, позволяя вам создавать интерактивные и динамичные веб-страницы. Внимательно читайте описания заданий и используйте подсказки, если столкнетесь с трудностями.

Список тем

Задание 1: Простое удаление класса

Удалите класс "highlight" у параграфа с id "myParagraph". После выполнения кода параграф должен перестать быть выделенным.

CSS

.highlight {
  background-color: yellow;
  padding: 10px;
}

HTML

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

                      <p id="myParagraph" class="highlight">Этот параграф выделен желтым цветом.</p>

<p id="myParagraph" class="highlight">Этот параграф выделен желтым цветом.</p>

JavaScript

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

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

Используйте метод `getElementById` для доступа к элементу по его id и свойство `classList` для работы с классами элемента. Для удаления класса используйте метод `remove()` у `classList`. Убедитесь, что правильно указали имя класса, который нужно удалить.

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

Результат

Лог

Выполнить

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

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

Задание 2: Удаление нескольких классов

Удалите классы "highlight" и "bold" у кнопки. Кнопка должна потерять и желтый фон, и жирный шрифт.

CSS

.highlight {
  background-color: yellow;
}

.bold {
  font-weight: bold;
}

HTML

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

                      <button id="myButton" class="highlight bold">Кнопка с двумя классами</button>

<button id="myButton" class="highlight bold">Кнопка с двумя классами</button>

JavaScript

const button = document.input__1("myButton");
button.classList.input__2("highlight");
button.classList.input__3("bold");

                     const button = document.input__1("myButton");
button.classList.input__2("highlight");
button.classList.input__3("bold");

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

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

Результат

Лог

Выполнить

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

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

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

Удалите класс "active" у всех элементов списка `li`. Все элементы списка должны перестать быть подчеркнутыми.

CSS

.active {
  text-decoration: underline;
}

HTML

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

                      <ul id="myList">
  <li class="active">Пункт 1</li>
  <li class="active">Пункт 2</li>
  <li class="active">Пункт 3</li>
</ul>

<ul id="myList">
  <li class="active">Пункт 1</li>
  <li class="active">Пункт 2</li>
  <li class="active">Пункт 3</li>
</ul>

JavaScript

const listItems = document.input__1("li.active");
listItems.forEach(function(item) {
  item.classList.input__2("active");
});

                     const listItems = document.input__1("li.active");
listItems.forEach(function(item) {
  item.classList.input__2("active");
});

Используйте метод `querySelectorAll` для выбора всех элементов `li` с классом "active". Затем используйте цикл `forEach` для перебора каждого элемента и удаления класса "active" у каждого из них.

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

Результат

Лог

Выполнить

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

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

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

Удалите класс "error" у элемента с id "message", только если у него также есть класс "visible". Сообщение об ошибке должно исчезнуть, только если оно видимо.

CSS

.error {
  color: red;
}

.visible {
  display: block;
}

HTML

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

                      <div id="message" class="error visible">Ошибка!</div>

<div id="message" class="error visible">Ошибка!</div>

JavaScript

const messageElement = document.input__1("message");
if (messageElement.classList.input__2("visible")) {
  messageElement.classList.input__3("error");
}

                     const messageElement = document.input__1("message");
if (messageElement.classList.input__2("visible")) {
  messageElement.classList.input__3("error");
}

Сначала получите доступ к элементу с id "message". Затем проверьте, есть ли у него класс "visible" с помощью метода `contains()` у `classList`. Если класс "visible" присутствует, удалите класс "error".

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

Результат

Лог

Выполнить

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

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

Задание 5: Удаление класса при клике

Добавьте обработчик события на кнопку с id "removeClassButton". При клике на кнопку, класс "highlight" должен быть удален у параграфа с id "textBlock".

CSS

.highlight {
  background-color: lightblue;
  padding: 5px;
}

HTML

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

                      <button id="removeClassButton">Убрать выделение</button>
<p id="textBlock" class="highlight">Этот блок текста выделен.</p>

<button id="removeClassButton">Убрать выделение</button>
<p id="textBlock" class="highlight">Этот блок текста выделен.</p>

JavaScript

const button = document.input__1("removeClassButton");
const textBlock = document.input__2("textBlock");
button.addEventListener("click", function() {
  textBlock.classList.input__3("highlight");
});

                     const button = document.input__1("removeClassButton");
const textBlock = document.input__2("textBlock");
button.addEventListener("click", function() {
  textBlock.classList.input__3("highlight");
});

Получите доступ к кнопке и параграфу. Добавьте обработчик события 'click' на кнопку. Внутри обработчика удалите класс "highlight" у параграфа.

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

Результат

Лог

Выполнить

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

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

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

При клике на кнопку с id "childButton", удалите класс "parent-highlight" у родительского элемента этой кнопки.

CSS

.parent-highlight {
  border: 2px solid red;
  padding: 10px;
}

HTML

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

                      <div id="parentDiv" class="parent-highlight">
  <button id="childButton">Удалить выделение родителя</button>
</div>

<div id="parentDiv" class="parent-highlight">
  <button id="childButton">Удалить выделение родителя</button>
</div>

JavaScript

const childButton = document.input__1("childButton");
childButton.addEventListener("click", function() {
  const parentElement = childButton.input__2;
  parentElement.classList.input__3("parent-highlight");
});

                     const childButton = document.input__1("childButton");
childButton.addEventListener("click", function() {
  const parentElement = childButton.input__2;
  parentElement.classList.input__3("parent-highlight");
});

Получите доступ к кнопке. Добавьте обработчик события 'click'. Внутри обработчика получите родительский элемент кнопки, используя свойство `parentElement`. Затем удалите класс "parent-highlight" у родительского элемента.

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

Результат

Лог

Выполнить

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

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

Задание 7: Удаление класса у предыдущего элемента

При клике на кнопку с id "removePrevButton", удалите класс "prev-highlight" у предыдущего элемента параграфа с id "targetParagraph".

CSS

.prev-highlight {
  background-color: lightgreen;
  padding: 5px;
}

HTML

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

                      <div id="prevElement" class="prev-highlight">Предыдущий элемент</div>
<p id="targetParagraph">Целевой параграф</p>
<button id="removePrevButton">Убрать выделение предыдущего</button>

<div id="prevElement" class="prev-highlight">Предыдущий элемент</div>
<p id="targetParagraph">Целевой параграф</p>
<button id="removePrevButton">Убрать выделение предыдущего</button>

JavaScript

const button = document.input__1("removePrevButton");
const targetParagraph = document.input__2("targetParagraph");
button.addEventListener("click", function() {
  const prevElement = targetParagraph.input__3;
  prevElement.classList.input__4("prev-highlight");
});

                     const button = document.input__1("removePrevButton");
const targetParagraph = document.input__2("targetParagraph");
button.addEventListener("click", function() {
  const prevElement = targetParagraph.input__3;
  prevElement.classList.input__4("prev-highlight");
});

Получите доступ к кнопке и параграфу. Добавьте обработчик события 'click' на кнопку. Внутри обработчика получите предыдущий элемент параграфа, используя свойство `previousElementSibling`. Затем удалите класс "prev-highlight" у предыдущего элемента.

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

Результат

Лог

Выполнить

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

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

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

При клике на кнопку с id "delayButton", удалите класс "delayed-highlight" у параграфа с id "delayParagraph" через 2 секунды.

CSS

.delayed-highlight {
  background-color: orange;
  transition: background-color 0.5s ease;
}

HTML

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

                      <button id="delayButton">Удалить выделение с задержкой</button>
<p id="delayParagraph" class="delayed-highlight">Этот параграф выделен оранжевым.</p>

<button id="delayButton">Удалить выделение с задержкой</button>
<p id="delayParagraph" class="delayed-highlight">Этот параграф выделен оранжевым.</p>

JavaScript

const button = document.input__1("delayButton");
const delayParagraph = document.input__2("delayParagraph");
button.addEventListener("click", function() {
  setTimeout(function() {
    delayParagraph.classList.input__3("delayed-highlight");
  }, input__4);
});

                     const button = document.input__1("delayButton");
const delayParagraph = document.input__2("delayParagraph");
button.addEventListener("click", function() {
  setTimeout(function() {
    delayParagraph.classList.input__3("delayed-highlight");
  }, input__4);
});

Получите доступ к кнопке и параграфу. Добавьте обработчик события 'click' на кнопку. Внутри обработчика используйте функцию `setTimeout` чтобы отложить выполнение удаления класса на 2 секунды (2000 миллисекунд).

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

Результат

Лог

Выполнить

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

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