На этом шаге мы рассмотрим возможность программного изменения встроенных ствойст стиля CSS.
Прежде чем перейти к обсуждению эффектов, реализованных в библиотеке jQuery, кратко рассмотрим принципы работы со стилями CSS. В предыдущих шагах мы изменяли внешний вид документа, определяя классы стилей в отдельных таблицах стилей, а затем добавляя или удаляя эти классы средствами библиотеки jQuery. Обычно это наиболее предпочтительный способ внедрения стилей CSS в разметку HTML, потому что он усиливает роль таблиц стилей в оформлении визуального представления таблиц. Однако иногда бывают ситуации, когда возникает необходимость применить стили, которые отсутствуют, или не так-то просто определить в таблицах стилей. К счастью, для решения подобных задач библиотека jQuery предлагает метод .css().
Данный метод действует и как метод записи, и как метод чтения. Чтобы получить значение свойства стиля, достаточно просто передать методу имя этого свойства в виде строки, например .css('backgroundColor').
Сложносоставные имена свойств могут передаваться методу в нотации CSS, когда слова в имени свойства отделяются дефисом (background-color), или в нотации DOM, когда каждое следующее слово в имени начинается с символа верхнего регистра (backgroundColor). Для записи значений свойств стилей существуют две версии метода .css(): одна из них принимает одно свойство и его значение, а вторая принимает отображение пар свойство-значение:
.css('property','value')
.css({property-1: 'value1', property-2 : 'value2'})
Опытные разработчики на JavaScript без труда узнают в этих отображениях jQuery литералы объектов JavaScript.
Примечание. Числовые значения не должны окружаться кавычками, тогда как строковые значения должны. При использовании версии метода, принимающей отображения, имена свойств в нотации DOM могут не заключаться в кавычки.
Метод .css() мы можем использовать точно так же, как мы использовали метод .addClass(): он может объединяться в цепочку с селектором или подключаться к событию. Для демонстрации вышесказанного мы вновь вернемся к примеру переключателя стилей из шага 48, но разметка HTML будет несколько иной:
<div id="switcher">
<div class="label">Стиль текста</div>
<button id="switcher-default">Обычный</button>
<button id="switcher-large">Увеличить</button>
<button id="switcher-small">Уменьшить</button>
</div>
<div class="speech">
<p>Несколько лет тому назад в одном из своих поместий жил старинный
русской барин, Кирила Петрович Троекуров. Его богатство, знатный род и связи
давали ему большой вес в губерниях, где находилось его имение. Соседи рады
были угождать малейшим его прихотям; губернские чиновники трепетали при его
имени; Кирила Петрович принимал знаки подобострастия как надлежащую дань;
дом его всегда был полон гостями, готовыми тешить его барскую праздность,
разделяя шумные, а иногда и буйные его увеселения. Никто не дерзал
отказываться от его приглашения, или в известные дни не являться с должным
почтением в село Покровское. В домашнем быту Кирила Петрович выказывал все
пороки человека необразованного. Избалованный всем, что только окружало его,
он привык давать полную волю всем порывам пылкого своего нрава и всем затеям
довольно ограниченного ума. Не смотря на необыкновенную силу физических
способностей, он раза два в неделю страдал от обжорства и каждый вечер бывал
навеселе. В одном из флигелей его дома жили 16 горничных, занимаясь
рукоделиями, свойственными их полу. Окны во флигеле были загорожены
деревянною решеткою; двери запирались замками, от коих ключи хранились у
Кирила Петровича. Молодые затворницы, в положеные часы, сходили в сад и
прогуливались под надзором двух старух. От времени до времени Кирила
Петрович выдавал некоторых из них за муж и новые поступали на их место. С
крестьянами и дворовыми обходился он строго и своенравно; не смотря на то,
они были ему преданы: они тщеславились богатством и славою своего господина
и в свою очередь позволяли себе многое в отношении к их соседам, надеясь на
его сильное покровительство.</p>
</div>
За счет присоединения таблицы стилей с некоторыми основными правилами оформления изначально страница может выглядеть так, как показано на рисунке 1.
Рис.1. Первоначальный вид страницы
Текст этого примера можно взять здесь.В этой версии переключателя стилей мы используем элементы <button>. Щелчок на кнопках Увеличить и Уменьшить будет соответственно увеличивать и уменьшать размер шрифта, которым отображается текст в элементе <div class="speech">, а щелчок на кнопке Обычный будет восстанавливать размер шрифта для элемента <div class="speech"> в его первоначальное значение.
Если бы нам требовалось однократно изменять размер шрифта, устанавливая его в некоторое предопределенное значение, мы могли бы по-прежнему использовать метод .addClass(). Но предположим, что теперь нам необходимо, чтобы размер шрифта продолжал увеличиваться или уменьшаться с каким-то шагом при каждом щелчке на соответствующей кнопке. Теоретически вполне возможно определить для каждого щелчка отдельный класс CSS и выполнять итерации по ним, однако самый простой способ заключается в том, чтобы каждый раз вычислять новый размер шрифта, получая текущее его значение и увеличивая его на некоторый коэффициент (например, на 40%).
На следующем шаге мы закончим изучение этого вопроса.
