Управляем стилями CSS с помощью jQuery
Добрый всем день. Сегодня как я и обещал в уроке «Управляем видимостью объекта с помощью jQuery» рассмотрим методы, которые используются для управления CSS стилями с помощью jQuery.
Напомню, что с помощью стилей мы можем не только определять внешний вид элемента на веб странице, но и управлять его положением, показывать и скрывать его по своему желанию, изменять размер, да и много еще чего. Образно говоря, тот кто получает доступ к управлению стилями CSS, тот управляет самой веб страницей! А jQuery такую возможность своим пользователям предоставляет!
В jQuery имеется три категории методов: одни манипулируют с отобранными элементами, другие возвращают значения элемента, а третьи изменяют сами элементы.
Чтобы добавить какому-либо элементу стиль, необходимо воспользоваться следующим методом: .css(name,value)
Давайте, пока мы не ушли далеко от верха страницы, поменяем стиль у названия статьи. Сделаем его, к примеру, красного цвета:
В этом примере я отобрал элемент с идентификаторм , который отвечает за отображение названия сайта и добавил стиль т.е. цвет. А кнопки отвечают за применение или возврат стиля по умолчанию.
В качестве параметров могут используются названия и значения, применимые в CSS: background, border, font-style, color и т.д.
Если необходимо задать для элемента несколько CSS-правил, то лучше использовать следующую конструкцию:
Данная инструкция сделает у предыдущего параграфа цвет текста синим, а насыщенность шрифта установит равной 900.
Обратите внимание, что для сложно-составных свойств CSS вроде font-weight и background-color также используются их эквиваленты из JvaScript: fontWeight, backgroundColor и т.д.
Для демонстрации других методов работы со стилями я воспользуюсь помощью разноцветных квадратов, которые уже неоднократно сослужили мне службу в таких уроках как «Управляем положением слоя с помощью z-index» и «Управляем видимостью объекта с помощью jQuery».
Напомню код и стили для их создания:
Рассмотрим удаление и присвоение какому-либо элементу CSS-класса:
.removeClass(class)
.addClass(class)
Данная инструкция по нажатию на кнопку: «Удалить класс», удалит класс у первого дочернего элемента содержащегося в идентификаторе .
Следующий метод добавляет указанный класс к элементу, если его нет, или удаляет этот класс, если элемент уже имеет его:
.toggleClass(class)
Попробуйте покликать мышкой в пределах рамки обрамляющей цветные квадраты. Цвет фона будет попеременно меняться.
А получить (первая строка) и задать (вторая строка) ширину и высоту элемента элемента соответственно можно с помощью методов:
.width()
.width(value)
.height()
.height(value)
Продемонстрированный выше код отбирает последний :last элемент идентификатора и с помощью переключателя toggle меняет или восстанавливает значение по умолчанию при клике на синий квадрат. Для подсказки в стилях определено свойство: cursor:pointer.
Это очень интересная и важная особенность методов jQuery: они используются, как для задания параметров , так и для получения значений этих параметров .
Но и это еще не все! jQuery позволяет, в случае необходимости удалить CSS-файл, связанный с HTML-страницей и привязать новый:
$(‘link[media=’screen’]’).attr(‘href’, ‘Alternative.css’);
Попробуйте поменять, по вашему усмотрению, стили или код jQuery. Интересно, что у вас получится?
Автор: Сергей Зарубин
Дата: 2011-06-28
Колличество просмотров: 40246
Комментарии к заметке:
Комментарий добавил(а): Денис
Дата: 2012-01-14
Отличная статья. Все понятно. Спасибо.
Комментарий добавил(а): lElenaSn
Дата: 2017-06-25
Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
Вам достаточно просто зарегистрироваться на нашем сервисе. > www.oplata-vklike.tk > obrabotka.zarplatt.ru http://oplata-vklike.tk/ realno-money.tk oplata-vklike.tk www.airline-rabota.tk http://oplata-vklike.tk http://oplata-vklike.tk/ www.ch-investor.tk http://oplata-vklike.tk/ http://airline-rabota.tk/ oplata-vklike.tk oplata-vklike.tk http://oplata-vklike.tk/ > http://obrabotka-zakazow.tk/ Vkapi-Likes.tk www.click-likes.tk http://like-money.ru/ 
Подпишитесь на нашу бесплатную новостную рассылку и будте всегда в курсе всех изменений на нашем сайте. Обновление каждую неделю!
Статья, в которой разберем, как в jQuery осуществляется работа со стилями (style) элемента.
В jQuery работа со стилями HTML элементов осуществляется через метод css . Данный метод используется как получения значения стилей, так и для их добавления, изменения и удаления.
Как получить стиль элемента в jQuery
Первый вариант метода css — это получение окончательного значения CSS-свойства непосредственно применяемого к элементу.
Синтаксис метода css :
Данный метод, если его применить к набору элементов, возвращает значение CSS свойства только для первого его элемента.
Пример, в котором получим цвет фона непосредственно применённого к элементу #header :
В jQuery названия CSS-свойств можно указывать как в CSS, так и как это принято в JavaScript. Т.е. убирать дефисы и заменять буквы, следующие за каждым дефисом на прописные.
Если необходимо получить значения указанного CSS свойства или набора этих свойств у всех элементов текущего набора, то в этом случае необходимо использовать, например, метод each.
Например, определим значение свойства display у всех выбранных элементов и выведем их в консоль:
Кроме этого, метод css позволяет также получить сразу несколько CSS свойств у элемента.
Например, при нажатии на HTML элемент div выведим его ширину и высоту:
Как изменить или добавить стиль к элементу в jQuery?
Установить стиль элементу осуществляется тоже с помощью метода css, но в этом случае используется следующий синтаксис:
При установлении стилей с помощью метода css , они задаются ко всем элементам текущего набора.
Например, добавим ко всем элементам .info серый цвет фона (background):
Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары ‘имяСвойства’ : значение.
Пример, в котором показано как можно задать несколько CSS-свойств к элементам .success :
В качестве значения строки также можно использовать относительные значения, которые начинаются с += или -= . Первое выражение используется для увеличения текущего значения CSS свойства, а второе — для уменьшения.
Например, увеличим отступ слева и справа у элементов .container на 10px :
Ещё один способ использования метода css — это применение в качестве 2 параметра функции.
Вариант использования метода css, у которого в качестве второго параметра используется функция обычно находить применение, когда значение необходимо как-то вычислить или определить по какому-то алгоритму.
Например, установим всем элементам .text , у которых цвет шрифта не равен чёрному, CSS свойство color , равное red .
Например, поменяем значение CSS свойства width у всех элементов img на странице, находящихся #content :
Как удалить определённый стиль у элемента?
Для того чтобы в jQuery убрать определённый стиль у элемента, ему необходимо присвоить просто пустую строку.
Например, уберём у всех изображений на странице CSS свойство height :
Для работы со стилями применяется метод css() . Чтобы получить значение нужного свойства, мы передаем в этот метод в качестве параметра название свойства:
Изменение стиля
Чтобы изменить стиль, во-первых, мы можем передать в метод css в качестве второго параметра новое значение свойства:
Во-вторых, мы можем изменить стиль с помощью функции, которая также передается в качестве второго параметра метода css. Например, изменим цвет шрифта ссылок:
В зависимости от того, какое было старое значение oldValue элемента для данного свойства, функция возвращает новое значение для каждого элемента выборки.
В-третьих, мы можем передать массив свойств для установки:
Здесь в качестве параметра мы передаем объект javascript, в котором устанавливаем для нужных свойств новые значения.
Иногда необходимо увеличить или уменьшать свойства относительно текущего значения на определенное количество. В этом случае мы можем написать так:
Установка ширины и высоты
Несмотря на то, что мы можем манипулировать свойствами width и height через метод css, мы можем также использовать одноименные методы width() и height() :
