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