Поменять класс по клику / 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 методом. И напоследок демка с получившимся результатом