<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Добавление класса по клику в JavaScript

Добавление класса по клику в JavaScript

На этом уроке, мы научимся добавлять элементу, по которому кликнул пользователь, класс, чтобы изменить его внешний вид, применяя стили, добавленного класса.

Пример

Добавить к кнопкам, по которым кликнул пользователь, класс btn, в стилях которого содержится рамка и более темный цвет фона.

Добавление класса по клику в JavaScript.

HTML

<button>Главная</button>
<button>Услуги</button>
<button>О нас</button>
<button>Контакты</button>

CSS

button {
    background-color: #1e90ff;
    border: none;
    color: #fff;
    padding: 12px 16px;
    font-size: 16px;
}

Как это работает?

При событии клика, по кнопке, ей добавляется класс btn, который меняет цвет фона и добавляет рамку.

.btn {
    background-color: #0000ff;
    border: 3px solid cyan;
}

JavaScript

Для простоты понимания, добавим событие клик на весь документ.

document.onclick = function(event){
console.log(event);
}

Отследить событие в JavaScript

Посмотрим в консоли, что скрывается за событием event. Для этого кликнем по любой кнопке, в консоли вы увидите много свойств, описывающих объект события, одно из которых target, внутри которого ищем название тега tagName: BUTTON.

Добавление класса по клику в JavaScript.

Мы вытащили из консоли, важную для нас информацию, название тега BUTTON, так и следует писать в JS коде – заглавными буквами.

document.onclick = function(event){
console.log(event.target.tagName);
}

Теперь, нам известно, что мы ищем и кликнув по любом месте страницы, по любому элементу – получим в консоли название тега, для дальнейших манипуляций.

Добавление класса по клику в JavaScript.

Так JavaScript отслеживает событие клика и узнает, по какому именно элементу, кликнул пользователь, чтобы добавить ему указанный класс.

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

Делаем проверку, если event.target.tagName совпадает с BUTTON, то тогда элементу, по которому кликнули, присваивается класс btn, с помощью метода classList.add.

if (event.target.tagName == 'BUTTON'){
event.target.classList.add('btn');
}

Результат

Добавление класса по клику в JavaScript.

Изучать JavaScript – увлекательное занятие, особенно под руководством гуру, который создал для вас уникальный видео-курс, по практическому применению JavaScript.

На codepen, вы увидите остальные примеры и JavaScript код целиком.

See the Pen Добавление класса по клику в JavaScript by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.