Определение, виден ли элемент в текущей области просмотра: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

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

Простая проверка видимости

Определите, виден ли элемент с id "myElement" на странице. Если элемент полностью виден в пределах окна, измените его текст на "Виден", иначе - на "Не виден". Учтите, что элемент может быть частично виден.

CSS

#myElement { width: 100px; height: 100px; background-color: lightblue; }

HTML

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

                      <div id="myElement"></div>

<div id="myElement"></div>

JavaScript

const element = document.getElementById("myElement");
const rect = element.getBoundingClientRect();

if (rect.top >= 0 && rect.bottom <= input__1) {
  element.textContent = "Виден";
} else {
  element.textContent = "Не виден";
}

                     const element = document.getElementById("myElement");
const rect = element.getBoundingClientRect();

if (rect.top >= 0 && rect.bottom <= input__1) {
  element.textContent = "Виден";
} else {
  element.textContent = "Не виден";
}

Используйте метод getBoundingClientRect() для получения размеров и положения элемента. Проверьте, находятся ли верхняя (top) и нижняя (bottom) границы элемента в пределах видимой области (от 0 до window.innerHeight).

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

Результат

Лог

Выполнить

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

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

Проверка видимости с учетом прокрутки

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

CSS

#myElement { width: 100px; height: 100px; background-color: red; margin-top: 500px; }

HTML

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

                      <div id="myElement"></div>

<div id="myElement"></div>

JavaScript

const element = document.getElementById("myElement");

document.addEventListener("scroll", () => {
  const rect = element.getBoundingClientRect();

  if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
    element.style.backgroundColor = input__1;
  } else if (rect.top < window.innerHeight && rect.bottom > 0) {
    element.style.backgroundColor = input__2;
  } else {
    element.style.backgroundColor = input__3;
  }
});

                     const element = document.getElementById("myElement");

document.addEventListener("scroll", () => {
  const rect = element.getBoundingClientRect();

  if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
    element.style.backgroundColor = input__1;
  } else if (rect.top < window.innerHeight && rect.bottom > 0) {
    element.style.backgroundColor = input__2;
  } else {
    element.style.backgroundColor = input__3;
  }
});

Используйте событие 'scroll' для отслеживания прокрутки. Внутри обработчика события получайте положение элемента с помощью getBoundingClientRect() и сравнивайте его с размерами окна (window.innerHeight).

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

Результат

Лог

Выполнить

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

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

Видимость нескольких элементов

На странице есть несколько элементов с классом "block". Определите, какие из этих элементов видимы (полностью или частично), и добавьте к ним класс "visible", а к невидимым - "hidden".

CSS

.block { width: 100px; height: 100px; background-color: lightblue; margin-bottom: 290px; }
.visible { border: 2px solid green; }
.hidden { opacity: 0.3; }

HTML

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

                      <div class="block"></div>
<div class="block"></div>
<div class="block"></div>

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

JavaScript

const blocks = document.querySelectorAll(".block");

blocks.forEach(block => {
  const rect = block.getBoundingClientRect();

  if (rect.top < window.innerHeight && rect.bottom > 0) {
    block.classList.add(input__1);
    block.classList.remove("hidden");
  } else {
    block.classList.add(input__2);
     block.classList.remove("visible");
  }
});

                     const blocks = document.querySelectorAll(".block");

blocks.forEach(block => {
  const rect = block.getBoundingClientRect();

  if (rect.top < window.innerHeight && rect.bottom > 0) {
    block.classList.add(input__1);
    block.classList.remove("hidden");
  } else {
    block.classList.add(input__2);
     block.classList.remove("visible");
  }
});

Используйте querySelectorAll для получения всех элементов с классом "block". В цикле переберите элементы, получая их положение с помощью getBoundingClientRect() и сравнивая с размерами окна. Используйте classList.add() и classList.remove() для добавления и удаления классов.

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

Результат

Лог

Выполнить

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

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

Видимость элемента во вложенном контейнере

Определите, виден ли элемент с id "innerElement" внутри контейнера с id "container", который имеет ограниченную высоту и прокрутку. Если элемент полностью видим внутри контейнера, измените его текст на "Виден", иначе на "Не виден".

CSS

#container { width: 200px; height: 150px; overflow: auto; border: 1px solid black; }
#innerElement { width: 100px; height: 100px; background-color: lightblue; margin-top: 200px; }

HTML

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

                      <div id="container">
  <div id="innerElement"></div>
</div>

<div id="container">
  <div id="innerElement"></div>
</div>

JavaScript

const container = document.getElementById("container");
const element = document.getElementById("innerElement");

const containerRect = container.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();

if (elementRect.top >= containerRect.top && elementRect.bottom <= input__1) {
  element.textContent = "Виден";
} else {
  element.textContent = "Не виден";
}

                     const container = document.getElementById("container");
const element = document.getElementById("innerElement");

const containerRect = container.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();

if (elementRect.top >= containerRect.top && elementRect.bottom <= input__1) {
  element.textContent = "Виден";
} else {
  element.textContent = "Не виден";
}

Используйте getBoundingClientRect() как для элемента, так и для контейнера. Сравните координаты элемента относительно контейнера, а не окна браузера.

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

Результат

Лог

Выполнить

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

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

Определение видимости элемента при загрузке страницы

Определите, виден ли элемент с id="myImage" при загрузке страницы и выведите в консоль сообщение 'Изображение видимо' или 'Изображение не видимо'.

HTML

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

                      <img id="myImage" src="https://naytikurs.ru/img/1.png" style="margin-top: 200px;" alt="Test Image">

<img id="myImage" src="https://naytikurs.ru/img/1.png" style="margin-top: 200px;" alt="Test Image">

JavaScript

document.addEventListener("DOMContentLoaded", () => {
 const image = document.getElementById(input__1);
 const rect = image.getBoundingClientRect();

 if (rect.top < window.innerHeight && rect.bottom >= 0) {
 console.log('Изображение видимо');
 } else {
 console.log('Изображение не видимо');
 }
});

                     document.addEventListener("DOMContentLoaded", () => {
 const image = document.getElementById(input__1);
 const rect = image.getBoundingClientRect();

 if (rect.top < window.innerHeight && rect.bottom >= 0) {
 console.log('Изображение видимо');
 } else {
 console.log('Изображение не видимо');
 }
});

Используйте событие DOMContentLoaded, чтобы выполнить код после полной загрузки DOM. Получите положение элемента с помощью getBoundingClientRect и сравните с размером окна.

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

Результат

Лог

Выполнить

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

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

Изменение текста элемента в зависимости от степени видимости

Изменяйте текст в элементе #myElement в зависимости от того, насколько он виден. Если виден полностью - "Полностью видим", частично - "Частично видим", не виден - "Не видим".

CSS

#myElement { width: 100px; height: 100px; background-color: lightblue; margin-top: 500px; }

HTML

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

                      <div id="myElement"></div>

<div id="myElement"></div>

JavaScript

const element = document.getElementById("myElement");

document.addEventListener("scroll", () => {
  const rect = element.getBoundingClientRect();

  if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
    element.textContent = input__1;
  } else if (rect.top < window.innerHeight && rect.bottom > 0) {
    element.textContent = input__2;
  } else {
    element.textContent = input__3;
  }
});

                     const element = document.getElementById("myElement");

document.addEventListener("scroll", () => {
  const rect = element.getBoundingClientRect();

  if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
    element.textContent = input__1;
  } else if (rect.top < window.innerHeight && rect.bottom > 0) {
    element.textContent = input__2;
  } else {
    element.textContent = input__3;
  }
});

Используйте getBoundingClientRect и window.innerHeight для определения степени видимости.

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

Результат

Лог

Выполнить

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

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

Появление элемента при прокрутке

Сделайте так, чтобы элемент с id="hiddenElement" плавно появлялся (изменялась прозрачность от 0 до 1) при прокрутке страницы, когда он становится видимым.

CSS

#hiddenElement { width: 100px; height: 100px; background-color: lightcoral; margin-top: 600px; opacity: 0; transition: opacity 0.5s; }

HTML

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

                      <div id="hiddenElement"></div>

<div id="hiddenElement"></div>

JavaScript

const element = document.getElementById("hiddenElement");

document.addEventListener("scroll", () => {
 const rect = element.getBoundingClientRect();
 if (rect.top < window.innerHeight && rect.bottom > 0) {
 element.style.input__1 = 1;
 }
});

                     const element = document.getElementById("hiddenElement");

document.addEventListener("scroll", () => {
 const rect = element.getBoundingClientRect();
 if (rect.top < window.innerHeight && rect.bottom > 0) {
 element.style.input__1 = 1;
 }
});

Используйте CSS-свойство opacity для управления прозрачностью. В обработчике события scroll изменяйте opacity в зависимости от положения элемента.

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

Результат

Лог

Выполнить

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

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

Определение видимости элемента с учетом offsetParent

Определите, виден ли элемент с id="nestedElement" на странице. Учтите, что он может быть вложен в другие элементы с position: relative. Выведите результат в консоль.

CSS

#parent { position: relative; width: 200px; height: 150px; overflow: hidden; }
#nestedElement { width: 100px; height: 100px; background-color: lightblue; }

HTML

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

                      <div id="parent">
  <div id="nestedElement"></div>
</div>

<div id="parent">
  <div id="nestedElement"></div>
</div>

JavaScript

const element = document.getElementById("nestedElement");

if (input__1) {
  console.log("Элемент видим");
} else {
  console.log("Элемент не видим");
}

                     const element = document.getElementById("nestedElement");

if (input__1) {
  console.log("Элемент видим");
} else {
  console.log("Элемент не видим");
}

Используйте offsetParent чтобы узнать, есть ли у элемента родитель с позиционированием, отличным от static. Если offsetParent равен null, элемент считается невидимым.

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

Результат

Лог

Выполнить

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

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