Книга: JavaScript. Подробное руководство, 6-е издание
19.2.6. Чтение и запись параметров геометрии элемента
19.2.6. Чтение и запись параметров геометрии элемента
В разделе 15.8 мы узнали, насколько сложно бывает определить размер и координаты элемента, особенно в броузерах, не поддерживающих метод getBoundingClient-Rect()
(раздел 15.8.2). Библиотека jQuery упрощает эти вычисления, предоставляя методы, работающие в любых броузерах. Обратите внимание, что все методы, описываемые здесь, являются методами чтения, и лишь некоторые из них могут использоваться для записи.
Метод offset()
позволяет получить или изменить координаты элемента. Этот метод определяет координаты относительно начала документа и возвращает их в виде объекта со свойствами left
и top
, в которых хранятся координаты X и Y. Если передать методу объект с этими свойствами, он изменит координаты элемента в соответствии с указанными значениями. При необходимости он также установит CSS-атрибут position
, чтобы сделать элемент позиционируемым:
var elt = $("#sprite"); // Элемент, который требуется переместить
var position = elt.offset(); // Получить текущие координаты
position.top += 100; // Изменить координату У
elt.offset(position); // Переместить элемент в новую позицию
// Переместить все элементы <h1> вправо на расстояние, зависящее от их
// положения в документе
$('h1').offset(function(index,curpos) {
return {left: curpos.left + 25*index, top:curpos.top};
}):
Метод position()
похож на метод offset(),
за исключением того, что он позволяет только читать координаты и возвращает координаты элемента не относительно начала документа, а относительно его родителя. В разделе 15.8.5 мы узнали, что каждый элемент имеет свойство offsetParent
, ссылающееся на родительский элемент, относительно которого определяются координаты. Позиционируемые элементы всегда играют роль начала координат для своих потомков, но некоторые броузеры дают эту роль и некоторым другим элементам, таким как ячейки таблицы. Роль начала координат в библиотеке jQuery могут играть только позиционируемые элементы, и метод offsetParent()
объекта jQuery
отображает каждый элемент на ближайший позиционируемый вмещающий элемент или на элемент <body>
. Следует отметить не совсем удачный выбор имен этих методов: offset()
возвращает абсолютные координаты элемента относительно начала документа, а метод position()
возвращает смещение элемента относительно его ближайшего предка offsetРаrent ().
Существует также три метода чтения, позволяющие получить ширину, и три метода чтения, позволяющие получить высоту элемента. Методы width()
и height()
возвращают базовые значения ширины и высоты, не включающие отступы, рамки и поля. Методы innerWidth()
и innerHeight()
возвращают ширину и высоту элемента с отступами (слово «inner» (внутренний) указывает на тот факт, что эти методы возвращают ширину и высоту внутри рамки). Методы outerWidth()
и outerHeight()
по умолчанию возвращают размеры элемента с отступами и рамкой. Если этим методам передать значение true, они добавят размеры полей элемента. Следующий фрагмент демонстрирует, что для элемента можно получить четыре разные ширины:
var body = $("body");
var contentWidth = body.width();
var paddingWidth = body.innerWidth();
var borderWidth = body.outerWidth();
var marginWidth = body.outerWidth(true);
var padding = paddingWidth-contentWidth; // сумма левого и правого отступов
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.1. Чтение и запись значений HTML-атрибутов
- 19.2.2. Чтение и запись значений CSS-атрибутов
- 19.2.3. Чтение и запись CSS-классов
- 19.2.4. Чтение и запись значений элементов HTML-форм
- 19.2.5. Чтение и запись содержимого элемента
- 19.2.6. Чтение и запись параметров геометрии элемента
- 19.2.7. Чтение и запись данных в элементе
- Единое имя файла параметров InterBase
- 4.4.3. Чтение и запись
- Письма с элементами графики и вложениями
- Использование параметров библиотек документов
- Настройка основных параметров BIOS
- Настройка дополнительных параметров BIOS
- Пропуск параметров типа
- 1.18. Запись телефонных звонков
- Как сделать перезапись файлов в Проводнике более удобной?
- Не могу войти в систему под учетной записью администратора, поскольку среди имен пользователей, отображаемых на экране п...
- При попытке войти в систему Пользователю1 выдается предупреждение, что загрузился временный профиль и все сделанные изме...
- У файла и каталога есть атрибуты (например: Скрытый, Только чтение). Как ими управлять из командной строки?