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

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

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

Список тем

Скрытие элемента по ID

Скройте элемент с идентификатором "myDiv". Вам нужно получить элемент по ID и изменить его свойство, отвечающее за отображение.

HTML

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

                      <div id="myDiv">Этот элемент нужно скрыть</div>

<div id="myDiv">Этот элемент нужно скрыть</div>

JavaScript

document.input__1("myDiv").style.input__2 = "input__3";

                     document.input__1("myDiv").style.input__2 = "input__3";

Используйте `document.getElementById()` для получения элемента и свойство `style.display` со значением "none", чтобы скрыть элемент.

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

Результат

Лог

Выполнить

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

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

Отображение элемента по ID

Сделайте элемент с ID "hiddenDiv" видимым. Изначально он скрыт с помощью CSS. Вам нужно изменить его свойство `display`.

CSS

#hiddenDiv { display: none; }

HTML

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

                      <div id="hiddenDiv">Этот элемент нужно показать</div>

<div id="hiddenDiv">Этот элемент нужно показать</div>

JavaScript

document.getElementById("hiddenDiv").style.display = input__1;

                     document.getElementById("hiddenDiv").style.display = input__1;

Используйте `document.getElementById()` для получения элемента. Затем измените свойство `style.display` на "block" (или другое подходящее значение, в зависимости от типа элемента).

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

Результат

Лог

Выполнить

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

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

Переключение видимости элемента

Создайте функцию `toggleVisibility`, которая переключает видимость элемента с ID "toggleDiv". Если элемент видим, функция должна его скрывать, и наоборот.

HTML

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

                      <div id="toggleDiv">Этот элемент можно скрывать и показывать</div>
<button onclick="toggleVisibility()">Переключить</button>

<div id="toggleDiv">Этот элемент можно скрывать и показывать</div>
<button onclick="toggleVisibility()">Переключить</button>

JavaScript

function toggleVisibility() {
  var element = document.getElementById("toggleDiv");
  if (element.style.display input__1 "none") {
    element.style.display = input__2;
  } else {
    element.style.display = input__3;
  }
}

                     function toggleVisibility() {
  var element = document.getElementById("toggleDiv");
  if (element.style.display input__1 "none") {
    element.style.display = input__2;
  } else {
    element.style.display = input__3;
  }
}

Используйте `document.getElementById()` для получения элемента. Проверьте текущее значение `style.display`. Если оно равно "none", измените его на "block", иначе измените на "none".

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

Результат

Лог

Выполнить

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

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

Скрытие всех элементов с классом

Скройте все элементы с классом "hideMe". Вам нужно получить все элементы с этим классом и применить к ним изменение стиля.

HTML

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

                      <div class="hideMe">Скрыть 1</div>
<p class="hideMe">Скрыть 2</p>
<span class="hideMe">Скрыть 3</span>

<div class="hideMe">Скрыть 1</div>
<p class="hideMe">Скрыть 2</p>
<span class="hideMe">Скрыть 3</span>

JavaScript

var elements = document.input__1("hideMe");
for (var i = 0; i < elements.input__2; i++) {
  elements[i].style.display = input__3;
}

                     var elements = document.input__1("hideMe");
for (var i = 0; i < elements.input__2; i++) {
  elements[i].style.display = input__3;
}

Используйте `document.getElementsByClassName()` для получения коллекции элементов. Затем используйте цикл `for`, чтобы пройти по всем элементам и изменить их свойство `style.display` на "none".

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

Результат

Лог

Выполнить

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

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

Отображение элемента с использованием visibility

Сделайте элемент с ID "hiddenElement" видимым, используя свойство `visibility`. Изначально он скрыт.

CSS

#hiddenElement { visibility: hidden; }

HTML

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

                      <div id="hiddenElement">Этот элемент должен стать видимым</div>

<div id="hiddenElement">Этот элемент должен стать видимым</div>

JavaScript

document.getElementById(input__1).style.visibility = input__2;

                     document.getElementById(input__1).style.visibility = input__2;

Используйте `document.getElementById()` для получения элемента. Затем измените свойство `style.visibility` на "visible".

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

Результат

Лог

Выполнить

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

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

Скрытие элемента с использованием visibility

Скройте элемент с ID "visibleElement" , используя свойство `visibility`.

HTML

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

                      <div id="visibleElement">Этот элемент должен быть скрыт</div>

<div id="visibleElement">Этот элемент должен быть скрыт</div>

JavaScript

document.input__1("visibleElement").style.input__2 = "hidden";

                     document.input__1("visibleElement").style.input__2 = "hidden";

Используйте `document.getElementById()` для получения элемента. Затем измените свойство `style.visibility` на "hidden".

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

Результат

Лог

Выполнить

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

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

Переключение visibility с помощью тернарного оператора

Переключите видимость элемента с ID "ternaryDiv" с помощью тернарного оператора. Если элемент видим, скройте его, и наоборот.

HTML

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

                      <div id="ternaryDiv">Видимость этого элемента переключается</div>
<button onclick="toggle()">Переключить</button>

<div id="ternaryDiv">Видимость этого элемента переключается</div>
<button onclick="toggle()">Переключить</button>

JavaScript

function toggle() {
  var div = document.getElementById("ternaryDiv");
  div.style.visibility = div.style.visibility === input__1 ? input__2 : input__3;
}

                     function toggle() {
  var div = document.getElementById("ternaryDiv");
  div.style.visibility = div.style.visibility === input__1 ? input__2 : input__3;
}

Получите элемент по ID. Используйте тернарный оператор (`condition ? expr1 : expr2`) для проверки `style.visibility`. Если значение "visible", присвойте "hidden", иначе - "visible".

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

Результат

Лог

Выполнить

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

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

Скрытие изображения

Скройте изображение, используя JavaScript.

HTML

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

                      <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка">

<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка">

JavaScript

document.getElementById("myImage").input__1.input__2 = "none";

                     document.getElementById("myImage").input__1.input__2 = "none";

Получите элемент изображения по его ID и измените его свойство `style.display` на "none".

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

Результат

Лог

Выполнить

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

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

Показать скрытый список

Изначально список скрыт. Сделайте его видимым.

CSS

#myList { display: none; }

HTML

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

                      <ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

<ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

JavaScript

document.getElementById(input__1).style.display = input__2;

                     document.getElementById(input__1).style.display = input__2;

Получите элемент списка (`ul`) по его ID и измените его свойство `style.display` на "block".

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

Результат

Лог

Выполнить

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

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

Скрытие/Отображение по клику на другой элемент

Сделайте так, чтобы при клике на кнопку "Показать/Скрыть", элемент с id "tt" менял свою видимость.

HTML

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

                      <button id="toggleButton">Показать/Скрыть</button>
<div id="tt">Этот элемент будет скрываться/показываться</div>

<button id="toggleButton">Показать/Скрыть</button>
<div id="tt">Этот элемент будет скрываться/показываться</div>

JavaScript

document.getElementById("toggleButton").onclick = function() {
 var tt= document.getElementById("tt");
 if (tt.style.display input__1 "none") {
 tt.style.display = "block";
 } else {
 tt.style.display = "none";
 }
};

                     document.getElementById("toggleButton").onclick = function() {
 var tt= document.getElementById("tt");
 if (tt.style.display input__1 "none") {
 tt.style.display = "block";
 } else {
 tt.style.display = "none";
 }
};

Добавьте обработчик события `onclick` к кнопке. Внутри обработчика получите элемент с id "target" и переключите его `style.display` между "none" и "block".

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

Результат

Лог

Выполнить

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

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

Скрытие элемента через добавление класса

Скройте элемент с id "addClassDiv", добавив ему класс "hidden", который уже определен в CSS.

CSS

.hidden { display: none; }

HTML

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

                      <div id="addClassDiv">Этот элемент нужно скрыть добавлением класса</div>

<div id="addClassDiv">Этот элемент нужно скрыть добавлением класса</div>

JavaScript

document.getElementById("addClassDiv").classList.input__1("hidden");

                     document.getElementById("addClassDiv").classList.input__1("hidden");

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

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

Результат

Лог

Выполнить

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

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

Отображение элемента через удаление класса

Сделайте элемент с id "removeClassDiv" видимым, удалив у него класс "hidden", который скрывает его.

CSS

.hidden { display: none; }

HTML

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

                      <div id="removeClassDiv" class="hidden">Этот элемент нужно показать удалением класса</div>

<div id="removeClassDiv" class="hidden">Этот элемент нужно показать удалением класса</div>

JavaScript

document.getElementById("removeClassDiv").classList.input__1("input__2");

                     document.getElementById("removeClassDiv").classList.input__1("input__2");

Используйте `document.getElementById()` для получения элемента. Затем используйте свойство `classList` и метод `remove()`, чтобы удалить класс "hidden".

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

Результат

Лог

Выполнить

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

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

Переключение класса для скрытия/отображения

Сделайте так, чтобы при клике на кнопку, элемент с id "toggleClassDiv" переключал класс "hidden". Если класс есть, он должен удаляться, если нет - добавляться.

CSS

.hidden { display: none; }

HTML

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

                      <button onclick="toggleHidden()">Переключить класс</button>
<div id="toggleClassDiv">Этот элемент будет менять класс</div>

<button onclick="toggleHidden()">Переключить класс</button>
<div id="toggleClassDiv">Этот элемент будет менять класс</div>

JavaScript

function toggleHidden() {
 document.getElementById("toggleClassDiv").classList.input__1("hidden");
}

                     function toggleHidden() {
 document.getElementById("toggleClassDiv").classList.input__1("hidden");
}

Добавьте обработчик `onclick` к кнопке. В обработчике получите элемент по ID и используйте метод `toggle()` объекта `classList`.

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

Результат

Лог

Выполнить

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

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

Скрытие всех дочерних элементов

Скройте все дочерние элементы (теги `<li>`) внутри списка с id "parentList".

HTML

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

                      <ul id="parentList">
 <li>Элемент 1</li>
 <li>Элемент 2</li>
 <li>Элемент 3</li>
</ul>

<ul id="parentList">
 <li>Элемент 1</li>
 <li>Элемент 2</li>
 <li>Элемент 3</li>
</ul>

JavaScript

var parent = document.getElementById("parentList");
var children = parent.input__1;
for (var i = 0; i < children.length; i++) {
 children[i].style.display = input__2;
}

                     var parent = document.getElementById("parentList");
var children = parent.input__1;
for (var i = 0; i < children.length; i++) {
 children[i].style.display = input__2;
}

Получите элемент списка по ID. Затем получите все его дочерние элементы (используйте `children`). Пройдитесь по ним в цикле и установите для каждого `style.display = "none"`.

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

Результат

Лог

Выполнить

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

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

Отображение элемента с display: inline

Сделайте `span` с id="inlineSpan" видимым, установив ему `display: inline;`. Изначально он скрыт.

CSS

#inlineSpan { display: none; }

HTML

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

                      <span id="inlineSpan">Этот элемент должен стать inline</span>

<span id="inlineSpan">Этот элемент должен стать inline</span>

JavaScript

document.getElementById(input__1).style.display = input__2;

                     document.getElementById(input__1).style.display = input__2;

Получите элемент по ID и измените его свойство `style.display` на "inline".

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

Результат

Лог

Выполнить

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

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