Kwork.ru - услуги фрилансеров от 500 руб.

Управление 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");
...

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

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

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