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

Метод 1: использование псевдокласса CSS :active
Самый простой способ добиться желаемого эффекта — использовать псевдокласс CSS :active. Этот класс автоматически применяется к элементу при щелчке по нему. Определив определенный стиль для псевдокласса :active, вы можете управлять внешним видом элемента во время события щелчка.

.element:active {
  background-color: yellow;
}

Метод 2: добавление класса CSS с помощью JavaScript
Другой подход заключается в добавлении класса CSS к элементу с помощью JavaScript при нажатии на него. Этот класс может определить желаемый стиль выделения.

const element = document.getElementById('myElement');
element.addEventListener('click', () => {
  element.classList.add('highlight');
});

.highlight {
  background-color: yellow;
}

Метод 3: использование JavaScript для переключения класса
Вместо добавления класса вы можете переключать класс элемента при нажатии на него. Это позволит вам легко убрать выделение, повторно щелкнув элемент.

const element = document.getElementById('myElement');
element.addEventListener('click', () => {
  element.classList.toggle('highlight');
});

Метод 4. Применение встроенных стилей с помощью JavaScript
Если вы предпочитаете применять стили непосредственно к элементу, вы можете использовать JavaScript для изменения его атрибута встроенного стиля.

const element = document.getElementById('myElement');
element.addEventListener('click', () => {
  element.style.backgroundColor = 'yellow';
});

Метод 5. Сохранение состояния нажатия в переменной
Вы также можете отслеживать состояние нажатия с помощью переменной и условно применять стиль выделения.

let isClicked = false;
const element = document.getElementById('myElement');
element.addEventListener('click', () => {
  isClicked = !isClicked;
  if (isClicked) {
    element.style.backgroundColor = 'yellow';
  } else {
    element.style.backgroundColor = '';
  }
});

Метод 6. Использование атрибутов данных.
Атрибуты данных можно использовать для хранения пользовательских данных в элементах HTML. Переключая определенное значение атрибута данных, вы можете управлять эффектом выделения.

const element = document.getElementById('myElement');
element.addEventListener('click', () => {
  const isHighlighted = element.getAttribute('data-highlighted');
  if (isHighlighted === 'true') {
    element.setAttribute('data-highlighted', 'false');
  } else {
    element.setAttribute('data-highlighted', 'true');
  }
});

[data-highlighted="true"] {
  background-color: yellow;
}

Метод 7. Использование платформы или библиотеки CSS.
Если вы используете структуру или библиотеку CSS, например Bootstrap или jQuery UI, они часто предоставляют встроенные функции для подсветки элементов. В этих платформах обычно есть классы или методы, специально разработанные для этой цели, что еще больше упрощает реализацию.

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