Как добавлять и удалять класс каждый раз, когда я нажимаю?
Исходный код
HTML:
<div class="box"></div>
CSS:
.box{
width: 100px;
height: 100px;
background: blue;
}
Я хочу добавить:
.rounded {
border-radius: 10px;
}
Я знаю, что мне нужно использовать функцию щелчка в блоке div, но я не знаю, как добавить класс и удалить его.
Используйте класс переключения
$(".box").click(function(){
$(this).toggleClass("rounded");
});
Вы не должны этого делать. Как насчет этого подхода вместо...
.box{
width: 100px;
height: 100px;
background: blue;
}
.box.rounded {
border-radius: 10px;
}
Затем просто переключите «закругленный» класс с помощью toggleClass.
$('.box').toggleClass('rounded');
Другие решения просто переключаются между классами. Если вы хотите изменить существующий и добавить/удалить из него значения, используйте это:
$('.box').css('border-radius','50px');
и удалить:
$('.box').css('border-radius', '');
Jquery может удалить класс, однако не может изменить какой-либо CSS в классе:
$(target).addClass("myClass");
$(target).removeClass("myClass andThisOne removeSoManyClasses");
Чтобы перезаписать класс другим способом:
$("body").append("<style class='remove'>.box{/*many css*/}</style>");
$(".remove").remove();
Да, это возможно.
Синтаксис добавления класса css следующий:
$(selector).addClass(classname)
Для удаления класса css используется синтаксис:
$(selector).removeClass(classname)
