Работа с несколькими классами одновременно: Тренажер JavaScript: Покоряем HTML DOM

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

В этом разделе вы попрактикуетесь в управлении классами HTML элементов, но уже не с одним классом, а с несколькими одновременно. Задания направлены на то, чтобы вы освоили методы `classList.add()`, `classList.remove()`, `classList.toggle()` и `classList.contains()` применительно к нескольким классам. Это позволит вам более гибко и эффективно управлять стилями и поведением элементов на странице, динамически изменяя их внешний вид и функциональность в зависимости от действий пользователя или состояния приложения. Каждое задание представляет собой практическую задачу, где вам нужно будет дополнить JavaScript код, чтобы добиться желаемого результата. Внимательно читайте описания заданий и используйте подсказки, если возникнут затруднения. Успехов в обучении!

Список тем

Добавление нескольких классов

Добавьте элементу с id "element" одновременно два класса: "highlight" и "active". Посмотрите, как изменится стиль элемента после добавления классов.

CSS

.highlight { background-color: yellow; } .active { font-weight: bold; }

HTML

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

                      <div id="element">Этот текст должен стать желтым и жирным.</div>

<div id="element">Этот текст должен стать желтым и жирным.</div>

JavaScript

document.getElementById("element").classList.input__1("highlight", input__2);

                     document.getElementById("element").classList.input__1("highlight", input__2);

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

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

Результат

Лог

Выполнить

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

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

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

Удалите у элемента с id "element" классы "highlight" и "initial". Изначально элемент имеет эти классы. Убедитесь, что стили, связанные с этими классами, исчезли.

CSS

.highlight { background-color: yellow; } .initial { font-size: 20px; }

HTML

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

                      <div id="element" class="highlight initial">Этот текст изначально желтый и большого размера.</div>

<div id="element" class="highlight initial">Этот текст изначально желтый и большого размера.</div>

JavaScript

document.getElementById("element").classList.input__1("highlight", input__2);

                     document.getElementById("element").classList.input__1("highlight", input__2);

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

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

Результат

Лог

Выполнить

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

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

Переключение нескольких классов

Переключите (toggle) классы "highlight" и "active" у элемента с id "element". Если классы есть - они должны удалиться, если нет - добавиться. Повторное выполнение кода должно вернуть элемент в исходное состояние.

CSS

.highlight { background-color: lightgreen; } .active { color: blue; }

HTML

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

                      <div id="element">Этот текст изменит цвет фона и цвет текста при переключении классов.</div>

<div id="element">Этот текст изменит цвет фона и цвет текста при переключении классов.</div>

JavaScript

let element = document.getElementById("element"); 
element.classList.input__1("highlight"); 
element.classList.input__2("active");

                     let element = document.getElementById("element"); 
element.classList.input__1("highlight"); 
element.classList.input__2("active");

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

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

Результат

Лог

Выполнить

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

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

Проверка наличия нескольких классов

Проверьте, есть ли у элемента с id "element" одновременно классы "important" и "bold". Выведите в консоль `true`, если оба класса присутствуют, и `false` в противном случае.

CSS

.important { border: 2px solid red; } .bold { font-weight: bold; }

HTML

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

                      <div id="element" class="important">Этот текст имеет класс important.</div>

<div id="element" class="important">Этот текст имеет класс important.</div>

JavaScript

let element = document.getElementById("element"); 
let hasImportant = element.classList.input__1("important"); 
let hasBold = element.classList.input__2("bold"); 
console.log(hasImportant input__3 hasBold);

                     let element = document.getElementById("element"); 
let hasImportant = element.classList.input__1("important"); 
let hasBold = element.classList.input__2("bold"); 
console.log(hasImportant input__3 hasBold);

Используйте метод `classList.contains()` для проверки наличия класса. Проверьте каждый класс отдельно и используйте логическое И (`&&`) для проверки одновременного наличия.

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

Результат

Лог

Выполнить

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

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

Добавление классов к нескольким элементам

Добавьте классы "listItem" и "styled" всем элементам `<li>` внутри списка с id "list". Измените стиль всех элементов списка.

CSS

.listItem { margin-bottom: 5px; } .styled { font-style: italic; color: green; }

HTML

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

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

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

JavaScript

let listItems = document.input__1("#list li"); 
for (let i = 0; i < listItems.length; i++) { 
  listItems[i].classList.input__2("listItem", input__3); 
}

                     let listItems = document.input__1("#list li"); 
for (let i = 0; i < listItems.length; i++) { 
  listItems[i].classList.input__2("listItem", input__3); 
}

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

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

Результат

Лог

Выполнить

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

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

Условное добавление классов

Если переменная `isActive` равна `true`, добавьте элементу с id "box" классы "active" и "highlight". В противном случае, добавьте класс "inactive".

CSS

.active { border: 3px solid green; } .highlight { background-color: lightblue; } .inactive { opacity: 0.5; }

HTML

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

                      <div id="box">Этот блок изменит стиль в зависимости от значения переменной isActive.</div>

<div id="box">Этот блок изменит стиль в зависимости от значения переменной isActive.</div>

JavaScript

let isActive = input__1; 
let boxElement = document.getElementById("box"); 
if (isActive) { 
  boxElement.classList.input__2("active", input__3); 
} else { 
  boxElement.classList.input__4("inactive"); 
}

                     let isActive = input__1; 
let boxElement = document.getElementById("box"); 
if (isActive) { 
  boxElement.classList.input__2("active", input__3); 
} else { 
  boxElement.classList.input__4("inactive"); 
}

Используйте условную конструкцию `if...else` для проверки значения переменной `isActive`. В зависимости от условия, добавляйте разные наборы классов.

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

Результат

Лог

Выполнить

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

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

Удаление и добавление классов одновременно

У элемента с id "item" удалите класс "old" и добавьте классы "new" и "updated" одновременно. Изначально элемент имеет класс "old".

CSS

.old { color: gray; } .new { color: orange; } .updated { font-weight: bold; }

HTML

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

                      <div id="item" class="old">Этот текст изначально серый.</div>

<div id="item" class="old">Этот текст изначально серый.</div>

JavaScript

let itemElement = document.getElementById("item"); 
itemElement.classList.input__1("old"); 
itemElement.classList.input__2("new", input__3);

                     let itemElement = document.getElementById("item"); 
itemElement.classList.input__1("old"); 
itemElement.classList.input__2("new", input__3);

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

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

Результат

Лог

Выполнить

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

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

Переключение классов для нескольких элементов по условию

Для каждого элемента с классом "card", если его порядковый номер (индекс) четный, переключите классы "even" и "highlight".

CSS

.card { border: 1px solid black; padding: 10px; margin-bottom: 5px; } .even { background-color: #f0f0f0; } .highlight { border-color: blue; }

HTML

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

                      <div class="card">Карточка 1</div> 
<div class="card">Карточка 2</div> 
<div class="card">Карточка 3</div> 
<div class="card">Карточка 4</div>

<div class="card">Карточка 1</div> 
<div class="card">Карточка 2</div> 
<div class="card">Карточка 3</div> 
<div class="card">Карточка 4</div>

JavaScript

let cards = document.input__1(".card"); 
for (let i = 0; i < cards.length; i++) { 
  if (input__2 % 2 === 0) { 
    cards[i].classList.input__3("even"); 
    cards[i].classList.input__4("highlight"); 
  } 
}

                     let cards = document.input__1(".card"); 
for (let i = 0; i < cards.length; i++) { 
  if (input__2 % 2 === 0) { 
    cards[i].classList.input__3("even"); 
    cards[i].classList.input__4("highlight"); 
  } 
}

Используйте `querySelectorAll` для выбора всех элементов с классом "card". В цикле проверьте индекс каждого элемента на четность и используйте `classList.toggle()` для переключения классов.

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

Результат

Лог

Выполнить

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

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

Добавление классов на основе данных атрибута

Для элемента с id "dataElement" получите значение атрибута "data-type". Если значение равно "primary", добавьте классы "primary" и "bold", если "secondary" - добавьте классы "secondary" и "italic".

CSS

.primary { background-color: lightblue; } .bold { font-weight: bold; } .secondary { background-color: lightcoral; } .italic { font-style: italic; }

HTML

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

                      <div id="dataElement" data-type="primary">Этот текст изменит стиль в зависимости от data-type атрибута.</div>

<div id="dataElement" data-type="primary">Этот текст изменит стиль в зависимости от data-type атрибута.</div>

JavaScript

let element = document.getElementById("dataElement"); 
let dataType = element.input__1("data-type"); 
if (dataType === "primary") { 
  element.classList.input__2("primary", input__3); 
} else if (dataType === "secondary") { 
  element.classList.input__4("secondary", input__5); 
}

                     let element = document.getElementById("dataElement"); 
let dataType = element.input__1("data-type"); 
if (dataType === "primary") { 
  element.classList.input__2("primary", input__3); 
} else if (dataType === "secondary") { 
  element.classList.input__4("secondary", input__5); 
}

Используйте `getAttribute()` для получения значения атрибута "data-type". Используйте условную конструкцию `if...else if` для проверки значения и добавления соответствующих классов.

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

Результат

Лог

Выполнить

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

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