В процессе создания веб-страницы иногда необходимо знать точное расположение элемента на веб-странице.
В следующем руководстве обобщены соответствующие знания Javascript для позиционирования веб-страниц.
1. Размер веб-страницы и размер окна браузера.
Прежде всего, необходимо уточнить две основные концепции.
Вся площадь веб-страницы — это ее размер. Обычно размер веб-страницы определяется содержимым и таблицами стилей CSS.
Размер окна браузера относится к области веб-страницы, видимой в окне браузера, также называемой областью просмотра.
Очевидно, что если содержимое веб-страницы может полностью отображаться в окне браузера (то есть полосы прокрутки не появляются), то размер веб-страницы и размер окна браузера равны. Если невозможно отобразить всю страницу, прокрутите окно браузера, чтобы отобразить части веб-страницы.
2. Узнайте размер веб-страницы.
Каждый элемент на веб-странице имеет атрибуты clientHeight и clientWidth. Эти два атрибута относятся к визуальной области, занимаемой частью содержимого элемента плюс отступы, исключая пространство, занимаемое границей и полосой прокрутки.
(Рис. 1. Свойства clientHeight и clientWidth)
Таким образом, атрибуты clientHeight и clientWidth элемента документа представляют размер веб-страницы.
Скопируйте код кода следующим образом:
функция getViewport(){
if (document.compatMode == "BackCompat"){
возвращаться {
ширина: document.body.clientWidth,
высота: document.body.clientHeight
}
} еще {
возвращаться {
ширина: document.documentElement.clientWidth,
высота: document.documentElement.clientHeight
}
}
}
Приведенная выше функция getViewport может возвращать высоту и ширину окна браузера. При его использовании необходимо обратить внимание на три вещи:
1) Эту функцию необходимо запускать после загрузки страницы, иначе объект документа не будет сгенерирован и браузер сообщит об ошибке.
2) В большинстве случаев document.documentElement.clientWidth возвращает правильное значение. Однако в режиме совместимости IE6 document.body.clientWidth возвращает правильное значение, поэтому к функции добавляется оценка режима документа.
3) clientWidth и clientHeight являются свойствами только для чтения, и им не могут быть присвоены значения.
3. Еще один способ узнать размер веб-страницы
Каждый элемент на веб-странице также имеет свойства ScrollHeight и ScrollWidth, которые относятся к визуальной области элемента, включая полосу прокрутки.
Затем свойства ScrollHeight и ScrollWidth объекта документа представляют собой размер веб-страницы, что означает всю длину и ширину полосы прокрутки.
После функции getViewport() можно написать функцию getPagearea().
Скопируйте код кода следующим образом:
функция getPagearea(){
if (document.compatMode == "BackCompat"){
возвращаться {
ширина: document.body.scrollWidth,
высота: document.body.scrollHeight
}
} еще {
возвращаться {
ширина: document.documentElement.scrollWidth,
высота: document.documentElement.scrollHeight
}
}
}
Однако с этой функцией есть проблема. Если содержимое веб-страницы может быть полностью отображено в окне браузера без полос прокрутки, то значения clientWidth и ScrollWidth веб-страницы должны быть равны. Но на самом деле в разных браузерах разные методы обработки, и эти два значения не обязательно равны. Следовательно, нам нужно взять среди них большее значение, поэтому нам нужно переписать функцию getPagearea().
Скопируйте код кода следующим образом:
функция getPagearea(){
if (document.compatMode == "BackCompat"){
возвращаться {
ширина: Math.max(document.body.scrollWidth,
документ.body.clientWidth),
высота: Math.max(document.body.scrollHeight,
документ.body.clientHeight)
}
} еще {
возвращаться {
ширина: Math.max(document.documentElement.scrollWidth,
документ.documentElement.clientWidth),
высота: Math.max(document.documentElement.scrollHeight,
документ.documentElement.clientHeight)
}
}
}
4. Получите абсолютное положение элементов веб-страницы.
Абсолютное положение элемента веб-страницы относится к координатам верхнего левого угла элемента относительно верхнего левого угла всей веб-страницы. Это абсолютное положение можно получить путем расчета.
Во-первых, каждый элемент имеет атрибуты offsetTop и offsetLeft, которые представляют расстояние между левым верхним углом элемента и левым верхним углом родительского контейнера (объекта offsetParent). Следовательно, вам нужно всего лишь суммировать эти два значения, чтобы получить абсолютные координаты элемента.
(Рис. 2. Атрибуты offsetTop и offsetLeft)
Следующие две функции можно использовать для получения абсцисс и ординат абсолютного положения.
Скопируйте код кода следующим образом:
функция getElementLeft(элемент){
вар factLeft = element.offsetLeft;
вар текущий = element.offsetParent;
в то время как (текущий !== ноль){
actualLeft += current.offsetLeft;
текущий = текущий.offsetParent;
}
вернуть фактическоелево;
}
функция getElementTop(элемент){
вар фактическогоTop = element.offsetTop;
вар текущий = element.offsetParent;
в то время как (текущий !== ноль){
actualTop += current.offsetTop;
текущий = текущий.offsetParent;
}
вернуть фактическую вершину;
}
Поскольку в таблицах и iframe объект offsetParent не обязательно равен родительскому контейнеру, указанная выше функция не применяется к элементам в таблицах и iframe.
5. Получите относительное положение элементов веб-страницы.
Относительное положение элемента веб-страницы относится к координатам верхнего левого угла элемента относительно верхнего левого угла окна браузера.
Используя абсолютное положение, легко получить относительное положение. Просто вычтите расстояние прокрутки полосы прокрутки страницы из абсолютных координат. Расстояние полосы прокрутки по вертикали — это свойство ScrollTop объекта документа; расстояние полосы прокрутки по горизонтали — это свойство ScrollLeft объекта документа.
(Рис. 3. Атрибуты ScrollTop и ScrollLeft)
Перепишите две функции из предыдущего раздела соответственно:
Скопируйте код кода следующим образом:
функция getElementViewLeft(элемент){
вар factLeft = element.offsetLeft;
вар текущий = element.offsetParent;
в то время как (текущий !== ноль){
actualLeft += current.offsetLeft;
текущий = текущий.offsetParent;
}
if (document.compatMode == "BackCompat"){
вар elementScrollLeft = document.body.scrollLeft;
} еще {
вар elementScrollLeft = document.documentElement.scrollLeft;
}
возврат фактическогоLeft-elementScrollLeft;
}
функция getElementViewTop(элемент){
вар фактическогоTop = element.offsetTop;
вар текущий = element.offsetParent;
в то время как (текущий !== ноль){
actualTop += current.offsetTop;
текущий = текущий.offsetParent;
}
if (document.compatMode == "BackCompat"){
вар elementScrollTop = document.body.scrollTop;
} еще {
вар elementScrollTop = document.documentElement.scrollTop;
}
вернуть фактическоеTop-elementScrollTop;
}
Атрибутам ScrollTop и ScrollLeft могут быть присвоены значения, и они немедленно автоматически прокручивают веб-страницу до соответствующей позиции, поэтому их можно использовать для изменения относительного положения элементов веб-страницы. Кроме того, метод element.scrollIntoView() также имеет аналогичный эффект, благодаря которому элемент веб-страницы может появиться в верхнем левом углу окна браузера.
6. Быстрый способ узнать положение элемента
В дополнение к вышеперечисленным функциям существует быстрый способ немедленного получения положения элементов веб-страницы.
То есть использовать метод getBoundingClientRect(). Он возвращает объект, содержащий четыре атрибута: левый, правый, верхний и нижний, которые соответственно соответствуют расстоянию между левым верхним и правым нижним углами элемента относительно левого верхнего угла окна браузера (окна просмотра).
Следовательно, относительное положение элементов веб-страницы равно
Скопируйте код кода следующим образом:
вар X = this.getBoundingClientRect().left;
вар Y =this.getBoundingClientRect().top;
Плюс расстояние прокрутки, вы можете получить абсолютную позицию
Скопируйте код кода следующим образом:
вар X = this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
В настоящее время IE, Firefox 3.0+ и Opera 9.5+ поддерживают этот метод, но Firefox 2.x, Safari, Chrome и Konqueror его не поддерживают.