Поменять класс по клику / javascript

Поменять класс по клику / javascript

Довольно интересный вопрос: а как менять класс у элемента по клику? А по повторному клику возвращать старый? И второй интересный вопрос: а как присвоить второй класс элементу по клику? А по повторному клику убрать и его? Давайте ответим на 2 этих интересных вопроса.

Итак, первое - научимся менять класс.

Создадим квадрат и присвоим ему класс square

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

Зададим стили: ширина 200px, высота 200px и фоновый цвет - желтый

.square {
	width:200px;
	height:200px;
	background-color:yellow;
}

Теперь создадим новый класс square-new и зададим следующие стили: ширина 300px, высота 300px и фоновый цвет красный

.square-new {
	width:300px;
	height:300px;
	background-color:red;
}

Теперь пропишем функцию, которая будет по клику менять один класс на другой

onclick="this.className = (this.className == 'square' ? 'square-new' : 'square')"

Теперь вставим ее в наш html код и получим

<div class="square" onclick="this.className = (this.className == 'square' ? 'square-new' : 'square')"></div>

И теперь весь код получившегося примера

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<style>
.square {
	width:200px;
	height:200px;
	background-color:yellow;
}
.square-new {
	width:300px;
	height:300px;
	background-color:red;
}
</style>
<body>
<div class="square" onclick="this.className = (this.className == 'square' ? 'square-new' : 'square')"></div>
</body>
</html>

Работает. Теперь перейдем к вопросу №2. Для этого создадим прямоугольник с классом rectangle

<div class="rectangle"></div>

Зададим стили: ширина 500px, высота 200px и цвет фона - синий

.rectangle {
	width:500px;
	height:200px;
	background-color:blue;
}

И теперь добавим стили для нового класса - .click - зададим цвет фона - зеленый

.click {
	background-color:green;
}

Теперь нам нужна функция, которая при клике по нашему прямоугольнику будет присваивать ему класс .click и при повторном клике убирать. Вот она

onclick="this.className = (this.className == 'rectangle click' ? 'rectangle' : 'rectangle click')"

Мы взяли ту же самую функцию, что и в первом случае, только теперь либо присваиваем 2 класса, либо 1. Учитесь решать сложные задачи простыми методами:) Итог - решили 2 вопроса 1 методом. И напоследок демка с получившимся результатом

Demo

04.04.17
Для просмотра сайта обновите браузер.