Книга: 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); // Установить новые позиции
} // полос прокрутки

Оглавление книги

Оглавление статьи/книги
Похожие страницы

Генерация: 1.115. Запросов К БД/Cache: 3 / 1
поделиться
Вверх Вниз