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

Дата публикации:Февраль 16, 2011

В прошлых статьях мы рассмотрели, каким образом можно создать необходимые выборки. Теперь же мы перейдем к их управлению. Мы можем устанавливать и изменять стилевые правила 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");
...

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

Поделиться

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.