Управление CSS и элементами DOM

В прошлых статьях мы рассмотрели, каким образом можно создать необходимые выборки. Теперь же мы перейдем к их управлению. Мы можем устанавливать и изменять стилевые правила CSS, а также работать непосредственно с элементами DOM. Начнем мы с управления CSS.

Управление CSS

Благодаря моим предыдущим примерам, вы уже знакомы с функцией css(). Данная функция используется для присвоения стандартных CSS правил, таких как background (фон), border(рамка) и т.д. Любое правило, существующее в CSS таблицах, всегда можно установить через функцию css(). Помимо этого, с помощью данной функции вы также можете найти и получить различные CSS правила.

Attributes API jQuery включает в себя и другие, не менее полезные функции, предназначенные для манипулирования CSS стилями. Три следующие функции — addClass, .removeClass и .toggleClass — предлагают богатые возможности по приданию динамичности вашему WordPress сайту. Рассмотрим подробнее функции для управления CSS стилями:

.css(‘property’, ‘value’)jQuery(«.post») .css(«background», «#f60»);Добавляет или изменяет CSS правила у выбранных элементов
.addClass(‘className’)jQuery(«.post») .addClass(«sticky»);Добавляет класс или несколько классов к каждому из выбранных элементов
.removeClass(‘className’)jQuery(«.post») .removeClass(«sticky»);Удаляет класс или несколько классов у каждого из выбранных элементов
.toggleClass(‘className’, switch-optional)jQuery(«.post») .toggleClass(«sticky»);Переключает класс или несколько классов у выбранных элементов в зависимости от их текущего состояния. Если класс уже существует, он будет удален, иначе — добавлен.
.hasClass(‘className’)jQuery(«.post») .hasClass(«sticky»);Возвращает логическое значение true или false, если указанный класс (или несколько классов) существуют у каждого из выбранных элементов.

В качестве примера мы сделаем все записи в блоге прилепленными, т.е. присвоим им класс .sticky с помощью функции addClass():

...
jQuery(".post").addClass("sticky");
...

Результат представлен на изображении:

Блог про WordPress
Добавить комментарий

Получать новые комментарии по электронной почте.