jQuery: Изменение стилей элемента. Добавление, получение и удаление классов

Когда вы хотите изменить стиль элемента, есть два варианта, к которым прибегают чаще других. Первый — можно добавить или удалить класс, вызывая обновление стиля для элемента на основе его нового или удаленного класса. Второй — можно работать с элементом DOM, применяя стили напрямую. Начнем с того, что посмотрим, как с помощью jQuery можно просто изменить стили элементов через классы.

Добавление и удаление имен классов с помощью jQuery

Атрибут class элементов HTML критически важен для создания интерактивных интерфейсов. В HTML он служит для подачи этих имен в качестве строки, разделенной пробелами. Можно использовать столько пробелов, сколько хотите, но обычно применяют один. Например, у вас может быть:

<div class="some-class my-class another-class"></div>

К сожалению, в элементах DOM имена классов в соответствующем свойстве className представлены не массивом, а строкой, в которой имена разделены пробелами. Как это досадно и неудобно! Получается так: всякий раз, когда вы хотите добавить или удалить имена классов из элементов, у которых уже есть эти имена, нужно анализировать строку, чтобы определить отдельные имена при чтении и обеспечивать восстановление в корректный, разделенный пробелами формат при записи.

Взяв пример с jQuery и других подобных библиотек, HTML5 представила лучший способ выполнять эту задачу через API, называемый classList. Он прибегает к примерно тем же методам, что и jQuery. Но, к сожалению, нативные методы могут работать только с одним элементом за раз, чем и отличаются от методов jQuery. Если вы захотите добавить класс в набор элементов, то придется итерировать по ним. Вдобавок, будучи нововведением, classList не поддерживается старыми браузерами, в первую очередь Internet Explorer 6– — 9. Чтобы лучше понять эту разницу, рассмотрим код, написанный на чистом JavaScript, который выбирает все элементы с классом some-class и добавляет класс hidden:

var elements = document.getElementsByClassName('some-class');
  for(var i = 0; i < elements.length; i++) {
  elements[i].classList.add('hidden');
}

Предыдущий фрагмент совместим только с современными браузерами, включая Internet Explorer 10 или выше. Теперь сравним код с эквивалентом в jQuery:

$('.some-class').addClass('hidden');

Версия jQuery не только короче, но и совместима с Internet Explorer, начиная с 6 (конечно же, в зависимости от того, какую версию jQuery вы используете!).

ПРИМЕЧАНИЕ

Список имен классов рассматривается как неупорядоченный; таким образом, порядок следования имен в разделенном пробелами списке не имеет семантического значения.

Хотя написание кода, обрабатывающего добавление и удаление имен классов из набора элементов, не настолько монументальный труд, все же это хорошая идея абстрагировать подобные детали с помощью API, который скрывает механические детали подобных операций. К счастью, вам не нужно писать свой код, потому что jQuery уже сделала это за вас.

Добавление имен классов к элементам набора — простая операция, осуществляемая благодаря методу addClass(), который был использован в предыдущем фрагменте кода.

Синтаксис метода addClass
addClass(names)	Добавляет указанное имя (имена) класса ко всем элементам в наборе. Если предоставлена функция, то ей передается каждый элемент набора, по одному за раз, и возвращаемое значение используется в качестве имени (имен) класса.
Параметры	names — (Строка | Функция) Указывает имя класса или разделенную пробелами строку имен, которые нужно добавить. Если это функция — она будет вызвана для каждого элемента, с тем элементом, установленным как контекст функции (this). Функции передается два значения: индекс элемента и текущее значение класса элемента. Возвращаемое значение функции используется как новое имя или имена класса, которые будут добавлены к текущему значению.
Возвращает	Коллекцию jQuery.

Удалять имена класса просто с помощью метода removeClass().

Чтобы увидеть, когда метод removeClass() может быть полезен, допустим, что у вас есть такой элемент на странице:

<p id="text" class="hidden">Краткое описание</p>

Вы можете удалить скрытый класс, используя следующую команду:

$('#text').removeClass('hidden');

Синтаксис метода removeClass
removeClass(names)	Удаляет указанное имя (имена) класса из каждого элемента в коллекции jQuery. Если предоставлена функция, то ей передается каждый элемент набора, по одному за раз, и возвращаемое значение используется для удаления из имени (имен) класса.
Параметры	names — (Строка | Функция) Указывает имя класса или разделенную пробелами строку имен, которые нужно удалить. Если это функция, она будет вызвана для каждого элемента, устанавливая тот элемент как контекст функции (this). Функции передается два значения: индекс элемента и значение класса перед началом удаления. Возвращаемое значение функции используется как новое имя или имена класса, которые должны быть удалены.
Возвращает	Коллекцию jQuery.

Часто может понадобиться переключить набор стилей, принадлежащий имени класса, туда и обратно, видимо, чтобы показать изменения между двумя состояниями или по какой-то другой причине, нужной вашему интерфейсу. jQuery упрощает эту работу с помощью метода toggleClass().

Синтаксис метода toggleClass
toggleClass([names][, switch])	Добавляет указанное имя (имена) класса элементам, не содержащим его, или удаляет имя (имена) из элементов, уже содержащий данное имя (имена) класса. Обратите внимание: каждый элемент проверяется индивидуально, так что к некоторым элементам это имя класса может быть добавлено, а в других — удалено. Если предоставлен параметр switch, то имя (имена) класса всегда добавляется к элементам без них, если данный параметр имеет значение true, и удаляются, если false. Если метод вызван без параметров, то все имена класса каждого элемента в наборе будут удалены и впоследствии восстановлены при новом вызове этого метода. Если предоставляется только параметр switch, то все имена класса каждого элемента в наборе будут сохранены или удалены из этого элемента, в зависимости от значения switch. Если предоставлена функция, то возвращаемое значение используется как имя или имена класса и действие выполняется в зависимости от значения switch.
Параметры	names — (Строка | Функция) Указывает имя класса или разделенную пробелами строку имен, подлежащих переключению. Если это функция, она будет вызвана для каждого элемента, устанавливая тот элемент как контекст функции (this). Функции передается два значения: индекс элемента и значение класса того элемента. Возвращаемое значение функции используется как новое имя или имена класса, которые будут переключены. switch — (Логический тип) Управляющее выражение, значение которого определяет, будет ли класс только добавлен к элементам (true) или только удален (false).
Возвращает	Коллекцию jQuery.

Как видите, метод toggleClass() дает много возможностей. Прежде чем перейти к другим методам, рассмотрим несколько примеров.

Ситуация, когда метод toggleClass() может понадобиться, — если вы хотите легко и быстро переключить визуальное представление элементов, обычно основываясь на некоторых других элементах. Представьте, что хотите разработать простенький виджет Share (Поделиться), при щелчке показывающий окно с кнопками социальных сетей, чтобы поделиться ссылкой на эту страницу. Если кнопку нажать повторно, то окно должно быть скрыто.

Используя jQuery и метод jQuery click(), вы легко сможете сделать этот виджет:

$('.share-widget').click(function() {
  $('.socials', this).toggleClass('hidden');
});

Переключения класса на основании его наличия или отсутствия у элемента — достаточно распространенная операция, но возможны и переключения класса, основанные на других, произвольных условиях. Рассмотрим следующий код:

if (aValue === 10) {
  $('p').addClass('hidden');
} else {
  $('p').removeClass('hidden');
}

Для этой распространенной ситуации jQuery предоставляет параметр switch, который мы обсудили в описании метода. Можно сократить предыдущий фрагмент кода следующим образом:

$('p').toggleClass('hidden', aValue === 10);

В таком случае класс hidden будет добавлен ко всем абзацам, выбранным, если переменная aValue строго равна 10; в противном случае он будет удален.

В качестве последнего примера представьте, что может понадобиться добавить класс для каждого элемента, основываясь на заданном условии. Вы можете захотеть добавить ко всем нечетным элементам в наборе класс, называемый hidden, не меняя при этом классов для четных элементов. Достигнуть цели можно, передав функцию как первый аргумент toggleClass():

$('p').toggleClass(function(index) {
  return (index % 2 === 0) ? 'hidden' : '' ;
});

Иногда вам потребуется определить, есть ли у элемента конкретный класс, чтобы в соответствии с этим выполнить некие операции. С jQuery можно это сделать, используя метод hasClass():

$('p:first').hasClass('surprise-me');

Метод будет возвращать значение true, если любой элемент в наборе имеет указанный класс; в противном случае — false. Синтаксис данного метода следующий.

Синтаксис метода hasClass
hasClass(names)	Определяет, есть ли в наборе элемент, содержащий переданное имя класса.
Параметры	names — (Строка) Имя класса, поиск которого будет выполняться.
Возвращает	Возвращает true, если какой-либо из элементов в наборе содержит переданное имя класса, в противном случае — false.

Вспомнив метод is() из главы 3, можно достичь цели так:

$('p:first').is('.surprise-me');

Но, возможно, метод hasClass() делает код более читаемым и внутренне является гораздо более эффективным.

Манипулирование стилистическим исполнением элементов с помощью имен классов CSS — действенный инструмент, но в некоторых случаях вы захотите сосредоточиться на мельчайших стилях как объявленных непосредственно на элементах. Посмотрим, что jQuery предложит здесь.

Получение и установка стилей элементов с помощью jQuery

Изменение класса элемента позволяет вам выбрать, какой предопределенный набор заданных правил таблиц стилей должен применяться. Но иногда вы просто хотите установить значение лишь одного или нескольких свойств, неизвестных заранее; таким образом, имени класса не существует. Применение стилей напрямую к элементам (через свойство style, доступное для всех элементов DOM) автоматически переопределит стиль, заданный в таблице стилей (за некоторыми исключениями, например !important, но мы не собираемся здесь подробно обсуждать всю специфику CSS), что дает более точный контроль над отдельными элементами и их стилями.

Метод jQuery css() позволит вам манипулировать этими стилями, работая по принципу, аналогичному attr(). Можно установить индивидуальный стиль CSS, указав его имя и значение, или серию стилей, передавая их в объекте.

Синтаксис метода css
css(name, value) css(properties)	Устанавливает названному свойству или свойствам стиля CSS указанное значение для каждого элемента набора.
Параметры	name — (Строка) Имя свойства CSS, которому нужно установить значение. И CSS, и DOM поддерживают форматирование свойств, название которых состоит из нескольких слов (например, background-color и backgroundColor). В большинстве случаев вы будете использовать версию первого формата. value — (Строка | Число | Функция) Строка, число или функция, содержащие значение свойства. Если передается число, то jQuery преобразует его в строку и добавит «px» в конце этой строки. Если вам нужна другая единица, то преобразуйте значение в строку и добавьте соответствующую единицу перед вызовом метода. Если в качестве параметра передается функция, она будет вызвана для каждого элемента в коллекции, устанавливая элемент в качестве контекста функции (this). Функции передаются два значения: индекс элемента и текущее значение. Возвращаемое значение будет новым значением для свойства CSS. properties — (Объект) Определяет объект, свойства которого будут скопированы как свойства CSS для всех элементов в наборе.
Возвращает	Коллекцию jQuery.

Аргумент value может также быть функцией аналогично методу attr(). Это значит, что вы можете, например, увеличить ширину всех элементов в наборе на 20 пикселов, умноженных на индекс элемента, как в следующем примере:

$('.expandable').css('width', function(index, currentWidth) {
  return parseInt(currentWidth, 10) + 20 * index;
});

В этом фрагменте нужно передать текущее значение в функцию parseInt(), потому что ширина элемента возвращается в пикселах как строка (например, «50px»). Без преобразования сумма будет совершаться как конкатенация строк наподобие «50px20» (если значение index равно 1).

Если вы хотите увеличить ширину всех элементов на 20 пикселов, то jQuery может предложить вам хорошее сокращение. Вместо написания функции можно указать:

$('.expandable').css('width', '+=20');

И аналогичное сокращение возможно, если вы хотите отнять заданное количество пикселов:

$('.expandable').css('width', '-=20');

Приведем еще один пример того, как jQuery упрощает работу: обычно проблемное свойство opacity будет отлично работать со всеми браузерами (даже старыми), если передать значение между 0.0 и 1.0; больше никакой путаницы с фильтрами alpha в старых IE!

Теперь рассмотрим пример использования второй сигнатуры метода css():

$('p').css({
  margin: '1em',
  color: '#FFFFFF',
  opacity: 0.8
});

Этот код установит указанные значения ко всем элементам в наборе. Но что, если вы хотите создать эффект уменьшения прозрачности для ваших элементов?

Так же как и в сокращенной версии метода attr(), можно применить функции как значения к любому свойству CSS в объекте параметров свойства, и они будут вызваны для каждого элемента в наборе, чтобы определить, какое значение следует применить. Для выполнения этой задачи задействуйте функцию как значение opacity вместо фиксированного числа:

$('p').css({
  margin: '1em',
  color: '#1933FF',
  opacity: function (index, currentValue) {
    return 1 - ((index % 10) / 10);
  }
});

Наконец, обсудим, как можно применить css() с переданным ему именем или массивом имен для получения вычисленного стиля свойства или свойств, связанных с этим именем (именами) первого элемента в объекте jQuery. Когда мы говорим «вычисленный стиль», имеем в виду стиль после применения всех связанных, включенных и встроенных CSS.

Синтаксис метода css
css(name)	Получает вычисленное значение или значения свойства или свойств CSS, указанных по name для первого элемента в наборе.
Параметры	name — (Строка | Массив) Указывает имя свойства CSS или массив свойств CSS, вычисленное значение которых будет возвращено.
Возвращает	Вычисленное значение как строку или объект пар «свойство — значение».

Этот вариант метода css() всегда возвращает значения как строку, так что если нужно число или какой-то другой тип, то следует проанализировать возвращаемое значение, используя, в зависимости от ситуации, функции parseInt() или parseFloat().

Чтобы понять, как работает метод чтения css(), когда ему передается массив имен, рассмотрим такой пример. Необходимо вывести в консоль свойство и соответствующее ему значение элемента, имеющего special как его класс для следующих свойств: font-size, color и text-decoration. Для выполнения задачи вы должны написать:

Метод css() — еще один пример того, как jQuery решает множество проблем с кросс-браузерной несовместимостью. Чтобы решить эту задачу с использованием только нативных методов, вам пришлось бы применить метод getComputedStyle() для всех версий Chrome, Firefox, Opera, Safari и Internet Explorer, начиная с версии 9, и свойства currentStyle и runtimeStyle для Internet Explorer 8 и ниже.

Прежде чем продолжить, мы хотим обратить внимание на два важных факта. Первый: разные браузеры могут возвращать разные значения для цветов в CSS, эквивалентных логически, но не текстуально. Например, если у вас есть объявления вроде color: black;, то некоторые браузеры могут вернуть #000, #000000 или rgb(0, 0, 0). Второй факт: получение сокращенных форм в свойствах CSS, таких как margin или border, библиотекой не гарантируется (хотя и работает в отдельных браузерах).

Для маленького набора общедоступных значений CSS jQuery предоставляет удобные методы, которые получают доступ к этим значениям и преобразуют их в наиболее часто используемые типы.