in

Кнопка изменения цвета элемента через JavaScript

Подтянем твой лоускилл

Если ты принял компульсивное решение изучать JavaScript и теперь сидишь в шоке, то мы подготовили небольшой пример, который покажет тебе базовую концепцию DOM и работу с объектами.

Чуть-чуть теории

Document Object Model, сокращённо DOM – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять.

Объект document – основная «входная точка». С его помощью мы можем что-то создавать или менять на странице. И именно DOM позволяет нам получать доступ к элементам страницы с помощью JavaScript.

Получив с сервера документ, парсер браузера каждый тег превращает в узел и строит их иерархию. В результате получается дерево узлов (node), или просто DOM-дерево, в котором вложенные элементы представлены в виде дочерних узлов с полным набор атрибутов. Подробнее про DOM — тут.

Каждый элемент страницы является объектом Например, можем поменять цвет фона на черный

#меняем фон на черный
document.body.style.background = "black"

Поиск элемента по ID

Окей, мы можем менять какие-то параметры конкретного элемента. Но что, если код растянется на сотни или тысячи строк? Как нам найти конкретный элемент над которым мы будем работать?

Собственно, «искать» не обязательно- мы можем вызвать какой-либо уникальный элемент на странице, у которого есть атрибут id (обозначается символом #) с помощью document.getElementById(id). Например:

<!DOCTYPE html>
<html>
<body>

<h1 id="demo">The Document Object</h1>
<h2>The getElementById() Method</h2>

<script>
const myElement = document.getElementById("demo");
myElement.style.color = "red";
</script>

</body>
</html>

Значение id должно быть уникальным. В документе может быть только один элемент с данным id. Результат:

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

Выцеплять элементы по ID не очень удобно с практической точки зрения. Наиболее универсальный метод поиска – это querySelectorAll(css), он возвращает все элементы, удовлетворяющие данному CSS-селектору.

Также существует «обычная» конструкция querySelector. Единственная разница между querySelectorAll и querySelector в том, что первый возвращает массив элементов, а второй только первый элемент найденный на странице.

Этот метод действительно мощный, потому что можно использовать любой CSS-селектор. А их достаточно много. Например:

<!DOCTYPE html>
<html>
    <head>
        <title>Использование JavaScript метода document.querySelectorAll() (перебор элементов в цикле)</title>
    </head>
    <body>
        <button onclick = "myFunc()">Нажми меня</button> <!-- добавляем атрибут событий onclick -->
        <div class = "block">Первый блок</div>
        <div class = "block">Второй блок</div>
        <div class = "block">Третий блок</div>
        <script>
    function myFunc() {
      let blocks = document.querySelectorAll( ".block" ); // находим все элементы с классом block
      for( let i = 0; i < blocks.length; i++){ // проходим циклом по всем элементам объекта
        blocks[i].style.color = "red"; // устанавливаем красный цвет текста каждому элементу
      }		
    }
        </script>
    </body>
</html>

События

Когда нам нужно выполнить какой-то код при клике или при наведении на элемент — используется событие. Событие – это сигнал от браузера о том, что что-то произошло. На каждый DOM-элемент можно повесить такой эвент. Какие события могут быть:

  • click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  • contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
  • mouseover / mouseout – когда мышь наводится на / покидает элемент.
  • mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  • mousemove – при движении мыши.

JavaScript позволяет при обнаружении нужного события выполнить необходимый код. Для этого у HTML элементов есть специальные атрибуты обработчики событий (браузеру нужно понимать, что делать при наступлении какого-либо события)

Такой обработчик мы можем положить прямо в атрибут элемента:

<button type="button" style="display: block;" onclick="changeColor();">Change color </button>

В нашем примере мы напишем скрипт, который позволит по клику (тапу) на кнопку сделать однократное изменение цвета всех квадратов с синего на красный.

Практика

Для начала накидаем структуру. На странице у нас будет кнопка с атрибутом onlclick (туда мы передаем JS-функцию, которую напишем далее) и несколько блоков div с классом square. В кнопку прописываем атрибут обработчик, функция которого которая назначена у нас на кнопку Change Color

<!DOCTYPE html>
<html>
<body>

<h1>Нажми на кнопку, чтобы изменить цвет элемента</h1>
<button type="button" style="display: block;" onclick="changeColor();">Change color </button>

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

</body>
</html>

Опишем через css параметры класса square. По теории мы помним, что нам для функции будет нужен именно селектор класса, чтобы применить стиль к нескольким элементам на странице

.square {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
  display: inline-block;
}

Теперь непосредственно сам код JS. Пишем функцию, которую прописали в обработчике. В нашем случае document.getElementById(id) не подходит — у нас несколько элементов на странице, поэтому используем document.querySelectorAll. Внутри указываем наш класс. Метод forEach() выполняет указанную функцию один раз для каждого элемента в массиве.

   function changeColor() {
document.querySelectorAll(".square").forEach(v => v.style.backgroundColor = "red");
}

Посмотреть пример

 

Добавить комментарий

Ваш адрес email не будет опубликован.