Шрифт:
var borders = borderWidth-paddingWidth; // сумма толщины левой и правой рамки
var margins = marginWidth-borderWidth; // сумма левого и правого полей
Методы
width
и height
обладают свойствами, отсутствующими у других четырех методов (методов inner и outer). Во-первых, если первый элемент в объекте jQuery
является объектом Window
или Document
, эти методы вернут размер видимой области окна или полный размер документа. Другие методы работают только с элементами, не являющимися окнами или документами. Другая особенность методов
width
и height
заключается в том, что они являются также методами записи. Если передать значение этим методам, они установят ширину или высоту всех элементов в объекте jQuery
. (Обратите, однако, внимание, что они не могут изменять ширину или высоту объектов Window
и Document
.) Если аргумент имеет числовое значение, он будет интерпретироваться как число пикселов. Если передать строку, она будет использоваться как значение CSS-ат-рибута width
или height
, благодаря чему в ней можно указывать любые единицы измерения, предусматриваемые стандартом CSS. Наконец, как и другие методы записи, они могут принимать функцию, которая будет вызываться для вычисления значения ширины или высоты. Между ролями чтения и записи методов
width
и height
существует маленькое несоответствие. При использовании в качестве методов чтения они возвращают размеры элемента по содержимому, исключая отступы, рамки и поля. Однако при использовании в качестве методов записи они просто устанавливают CSS-атрибуты width
и height
. По умолчанию эти атрибуты также определяют размеры по содержимому. Но если элемент имеет CSS-атрибут box-sizing
(раздел 16.2.3.1), установленный в значение border-box
, методы width
и height
будут устанавливать размеры, включающие ширину отступов и рамок. Для элемента е, использующего блочную модель «content-box», вызов $(е).width(x).width вернет значение х. Однако для элемента, использующего блочную модель «border-box», этот же вызов в общем случае вернет другое значение. Последняя пара методов объекта
jQuery
, имеющих отношение к геометрии элементов, - это методы scrollTop
и scrollLeft,
позволяющие получить позиции полос прокрутки для элемента или множество позиций полос прокрутки для всех элементов. Эти методы могут применяться и к элементам документа, и к объекту Window
, а при вызове для объекта Document
они возвращают или устанавливают позиции полос прокрутки объекта Window
, хранящего документ. В отличие от других методов записи, методам scrollTop
и scrollLeft
нельзя передавать функции. Метод
scrollTop
как метод чтения и записи можно использовать в паре с методом height,
чтобы на их основе определить метод, прокручивающий окно на указанное число страниц:
// Прокручивает окно на n страниц, n может быть дробным и отрицательным числом
function page(n) {
var w = $(window); // Обернуть окно объектом jQuery
var pagesize = w.height; // Получить размер страницы
var current = w.scrollTop; // Текущие позиции полос прокрутки
w.scrollTop(current + n*pagesize); // Установить новые позиции
} // полос прокрутки
19.2.7. Чтение и запись данных в элементе
Библиотека jQuery определяет метод чтения/записи с именем
data,
который возвращает или устанавливает данные, связанные с любым элементом документа или с объектами Document
и Window
. Возможность связывать данные с любыми элементами является одной из наиболее важных и мощных особенностей: она лежит в основе механизма регистрации обработчиков событий и последовательностей визуальных эффектов в библиотеке jQuery, и в определенных случаях метод data
может оказаться полезным в ваших сценариях. Чтобы связать данные с элементами в объекте
jQuery
, нужно вызвать data
как метод записи, передав ему в виде двух аргументов имя и значение. Методу data
как методу записи можно также передать единственный объект, каждое свойство которого будет использоваться как пара имя/значение, связываемая с элементом или элементами в объекте jQuery
. Однако обратите внимание, что, когда методу data
передается объект, свойства этого объекта будут замещать все данные, ранее связанные с элементом или элементами. В отличие от многих других методов записи, с которыми мы уже познакомились, метод data
не вызывает функцию, переданную ему. Если во втором аргументе передать методу data
функцию, она будет сохранена, как любое другое значение. Конечно, метод
data
может также использоваться в роли метода чтения. При вызове без аргументов он возвращает объект, содержащий все пары имя/значение, связанные с первым элементом в объекте jQuery
. При вызове метода data
с единственным строковым аргументом он возвращает значение, связанное с этой строкой в первом элементе. Для удаления данных из элемента или элементов можно использовать метод
removeData.
(Вызов метода data с именованным значением null или undefined фактически не удаляет данные.) Если методу removeData
передать строку, он удалит значение, связанное с этой строкой в элементе или элементах. Если вызвать метод removeData
без аргументов, он удалит все данные: