Главная страница   /   8.3. Работа с CSS (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

8.3. Работа с CSS

В предыдущих примерах я использовал базовые атрибутивные методы, чтобы установить значение для атрибута style, тем самым определяя значение для CSS свойства для комплекта элементов. jQuery предоставляет набор очень хороших методов, которые сильно упрощают работу с CSS. Самый широко используемый и полезный из них – это метод css, который описан в таблице 8-4.

Совет

Эти методы работают с атрибутом style конкретного элемента. Если вы хотите работать со стилями, определенными в элементе style, тогда вам нужно использовать связанные с классами методы, ранее описанные в этой главе.

Таблица 8-4: Метод css
Метод Описание
css(name) Получает значение указанного свойства первого элемента в объекте jQuery
css(name, value) Устанавливает значение для указанного свойства для всех элементов в объекте jQuery
css(map) Устанавливает несколько свойств для всех элементов в объекте jQuery при помощи объекта-карты
css(name, function) Устанавливает значение для указанного свойства для всех элементов в объекте jQuery с использованием функции

Когда вы читаете значение свойства, используя метод css, вы получаете значение только от первого элемента в объекте jQuery. Однако, когда вы устанавливаете свойство, изменение затрагивает все элементы. В листинге 8-17 показано базовое использование метода css.

Листинг 8-17: Использование метода css для получения и добавления значения свойства
<script type="text/javascript">
	$(document).ready(function () {
		var sizeVal = $('label').css("font-size");
		console.log("Size: " + sizeVal);
		$('label').css("font-size", "1.5em");
	});
</script>

В этом скрипте я выбираю все элементы label, использую метод css, чтобы получить значение свойства font-size и вывожу это на консоль. Затем я снова выбираю все элементы label и устанавливаю новое значение для того же свойства для всех из них.

Совет

Хотя я использовал настоящее имя свойства (font-size), а не имя свойства, определенное HTMLElement объектом (fontSize), jQuery поддерживает оба эти варианта.

Результат выполнения скрипта следующий:

Size: 16px

Совет

Если установить для свойства пустую строку (""), эффект будет тот же, как и при удалении свойства атрибута style в элементе.

Назначение нескольких CSS свойств

Можно установить несколько свойств двумя различными способами. Первый из них – это простая цепочка вызовов метода css, как показано в листинге 8-18.

Листинг 8-18: Цепочка вызовов метода css
<script type="text/javascript">
	$(document).ready(function () {
		$('label').css("font-size", "1.5em").css("color", "blue");
	});
</script>

В этом скрипте я устанавливаю значения для свойств font-size и color. Такого же результата можно добиться, если использовать объект-карту, как показано в листинге 8-19.

Листинг 8-19: Добавление нескольких значений свойств при помощи объекта-карты
<script type="text/javascript">
	$(document).ready(function () {
		var cssVals = {
			"font-size": "1.5em",
			"color": "blue"
		};
		$('label').css(cssVals);
	});
</script>

Результат выполнения обоих этих скриптов показан на рисунке 8-11.

Рисунок 8-11: Добавление нескольких свойств

Добавление относительных значений

Метод css может принимать относительные значения. Это числовые значения, которым предшествуют += или -= и которые складываются или вычитаются от текущих значений. Это способ может использоваться только с числовыми значениями. В листинге 8-20 представлен пример.

Листинг 8-20: Использование относительных значений с методом css
<script type="text/javascript">
	$(document).ready(function () {
		$('label:odd').css("font-size", "+=5");
		$('label:even').css("font-size", "-=5");
	});
</script>

Эти значения измеряются в тех же величинах, которые возвращаются после получения значения свойства. В этом примере я увеличил размер шрифта для нечетных элементов label на 5 пикселей и уменьшил на столько же для четных элементов label. Результат этого можно увидеть на рисунке 8-12.

Рисунок 8-12: Использование относительных значений

Добавление свойств с использованием функции

Можно динамически установить значение свойства, если в метод css добавить функцию. В листинге 8-21 представлен пример. Аргументами функции являются индекс элемента и текущее значение свойства. Переменная this указывает на HTMLElement объект для текущего элемента, а также возвращается значение, которое вы хотите установить.

Листинг 8-21: Установление значений CSS свойств с использованием функции
<script type="text/javascript">
	$(document).ready(function () {
		$('label').css("border", function (index, currentValue) {
			if ($(this).closest("#row1").length > 0) {
				return "thick solid red";
			} else if (index % 2 == 1) {
				return "thick double blue";
			}
		});
	});
</script>

Результат выполнения скрипта можно увидеть на рисунке 8-13.

Рисунок 8-13: Установление значений CSS свойств с использованием функции

Использование CSS методов для работы со специфическими свойствами

В дополнение к css методу, jQuery определяет ряд методов, которые будут полезны для работы со специфичными свойствами. Эти методы описаны в таблице 8-5.

Таблица 8-5: Методы для работы со специфическими CSS свойствами
Метод Описание
height() Получает высоту в пикселях первого элемента в объекте jQuery
height(value) Устанавливает высоту для всех элементов в объекте jQuery
innerHeight() Получает внутреннюю высоту первого элемента в объекте jQuery (эта высота включает padding, но не включает border и margin)
innerWidth() Получает внутреннюю ширину первого элемента в объекте jQuery (эта высота включает padding, но не включает border и margin)
offset() Возвращает координаты первого элемента в объекте jQuery относительно документа
outerHeight(boolean) Возвращает высоту первого элемента в объекте jQuery, включая padding и border. В аргументе определяется, будет ли включен margin
outerWidth(boolean) Возвращает ширину первого элемента в объекте jQuery, включая padding и border. В аргументе определяется, будет ли включен margin
position() Возвращает координаты первого элемента в объекте jQuery относительно родительского элемента
scrollLeft()
scrollTop()
Получает горизонтальную или вертикальную позицию первого элемента в объекте jQuery
scrollLeft(value)
scrollTop(value)
Устанавливает горизонтальную или вертикальную позицию для всех элементов в объекте jQuery
width() Получает ширину первого элемента в объекте jQuery
width(value) Устанавливает ширину для всех элементов в объекте jQuery
height(function)
width(function)
Устанавливает высоту или ширину для всех элементов в объекте jQuery с использованием функции

Большинство из этих методов очевидны, но некоторые требуют пояснения. Результатом методов offset и position является объект со свойствами top и left, обозначающими местоположение элемента. В листинге 8-22 показан пример использования метода position.

Листинг 8-22: Использование метода position
<script type="text/javascript">
	$(document).ready(function () {
		var pos = $('img').position();
		console.log("Position top: " + pos.top + " left: " + pos.left);
	});
</script>

Этот скрипт выводит на консоль свойства top и left объекта, возвращенного методом. Результат его выполнения следующий:

Position top: 108 left: 18

Установление ширины и высоты с использованием функции

Можно установить ширину и высоту для набора элементов динамически, если добавить методам width или height функцию. Аргументами этой функции являются индекс элемента и текущее значение свойства. Как вы уже поняли, переменная this указывает на HTMLElement для текущего элемента, а также возвращается значение, которое вы хотите установить. В листинге 8-23 показан пример.

Листинг 8-23: Установление высоты элемента с использованием функции
<script type="text/javascript">
	$(document).ready(function () {
		$('#row1 img').css("border", "thick solid red")
			.height(function (index, currentValue) {
			return (index + 1) * 25;
		});
	});
</script>

В этом скрипте я использую значение индекса в качестве множителя для высоты. Результат можно увидеть на рисунке 8-14.

Рисунок 8-14: Использование функции для установления высоты элементов