Pro jQuery
Адам Фриман
Работа с 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: Использование функции для установления высоты элементов