В этой главе изучаем добавление стилей и смену классов.
4.1 Меняем CSS у заданного селектора
Первый вариант как можно это сделать, выглядит так:
jQuery('.is-search-submit').css('color', 'red');
Обратите внимание, в этот раз в начале не знак доллара. Т.к. это более длинная запись, используется она редко, но знать про нее нужно. При помощи css вы можете задать свойство и значение.
$('.is-search-submit').css({color: 'red', fontWeight: 'bold'});
В этой записи интересны сразу 2 вещи:
1. Вы можете передавать json в фигурных скобках, чтобы применить сразу несколько стилей
2. fontWeight – нужно писать через camelCase, вместо стандартного font-weight. Это обязательно? Нет 🙂 font-weight тоже подходит, но помнить про такой вариант записи будет плюсом. Это более в духе javascript. Разница также в том, что fontWeight можно писать без кавычек, а вот ‘font-weight’, написанный без кавычек, вызывает ошибку (связано это с тем что “-” воспринимается как знак вычитания).
Более читаемый вариант для нескольких свойств выглядит так:
$('#panel1').css({
color: 'red',
fontWeight: 'bold'
});
4.2 Смена классов
Один из самых важных уроков jQuery – добавление, удаление классов. Именно такой вариант наиболее рекомендован, если дело касается стилей. В отличие от того же .css() ваши классы и их стили по прежнему будут в файле стилей, что создает более логичную структуру проекта.
$('.panel1').addClass('active');
$('.panel1').removeClass('active');
$('.panel1').toggleClass('active');
addClass – добавляет класс
removeClass – удалят класс
toggleClass – если класса нет – добавляет, если есть, то убирает (полезно использовать при клике)
4.3 Бонусный урок js-классы
В бонусном уроке хотелось бы поделиться с вами одной фишкой, которая на протяжении долгого времени хорошо себя зарекомендовала.
Когда у нас есть какой-то элемент на странице, предположим это контейнер с классом .main-wrap:
<div class="main-wrap">...</div>
То в такой ситуации, не нужно вешать js событие прям на этот класс. Самым лучшим решением будет добавление js класса, который НЕ ЗАВИСИТ от стилей в вашем файле css:
<div class="js-slide main-wrap">...</div>
И событие для jQuery писать уже на него:
$('.js-slide').slideToggle(500);
Что мы получаем? На выходе у вас есть js-slide который вы можете использовать абсолютно к любым элементам, и при этом не дублируя код события. CSS никак не влияет, понятное дело что писать стили для js-slide не нужно, их записывайте в main-wrap. Глядя на вёрстку, разработчик быстрее поймет – “ага, есть js-slide, а значит на этот элемент есть событие”.
Вот таким вот простым действием вы сделаете ваш код более красивым и логичным 🙂
