Javascript_javascript 기술을 사용하여 페이지 요소의 위치를 ​​가져오는 코드

下面的教程总结了Javascript在网页定位方面的相关知识。

一、网页的绝对大小和相对大小

首先，要明确两个基本概念。

一张网页的全部面积，就是它的绝对大小。通常情况下，网页的绝对大小由内容和CSS样式表决定。

网页的相对大小则是指在浏览器窗口中看到的那部分网页，也就是浏览器窗口的大小，又叫做viewport（视口）。

下图中央的方框就代表浏览器窗口，每次只能显示一部分网页。

（图一 网页的绝对大小和相对大小）

很显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的绝对大小和相对大小是相等的。

二、获取网页的相对大小

网页上的每个元素，都有clientHeight和clientWidth属性，利用它们就可以得到网页的相对大小。这两个属性代表的大小，是指元素的内容部分再加上padding的大小，但是不包括border和滚动条占用的空间。

（图二 clientHeight和clientWidth属性）

因此，document元素的clientHeight和clientWidth属性，就代表了网页的相对大小。

　　function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

上面的getViewport函数就可以返回浏览器窗口的高和宽。使用的时候，有三个地方需要注意：
1）这个函数必须在页面加载完成后才能运行，否则document对象还没生成，浏览器会报错。
2）大多数情况下，都是document.documentElement.clientWidth返回正确值。但是，在IE6的quirks模式中，document.body.clientWidth返回正确的值，因此函数中加入了对文档模式的判断。
3）clientWidth和clientHeight都是只读属性，不能对它们赋值。

三、获取网页的绝对大小

document对象的scrollHeight和scrollWidth属性就是网页的绝对大小，意思就是滚动条滚过的所有长度和宽度。

仿照getViewport()函数，可以写出getPagearea()函数。

　　function getPagearea(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.scrollWidth,
　　　　　　　　height: document.body.scrollHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.scrollWidth,
　　　　　　　　height: document.documentElement.scrollHeight
　　　　　　}
　　　　}
　　}

但是，这个函数有一个问题。前面说过，如果网页内容能够在浏览器窗口中全部显示，不出现滚动条，那么网页的绝对大小与相对大小应该相等，即 clientWidth和scrollWidth应该相等。但是实际上，不同浏览器有不同的处理，这两个值未必相等。所以，我们需要取它们之中较大的那个值，因此要对getPagearea()函数进行改写。

　　function getPagearea(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: Math.max(document.body.scrollWidth,
　　　　　　　　　　　　　　　　document.body.clientWidth),
　　　　　　　　height: Math.max(document.body.scrollHeight,
　　　　　　　　　　　　　　　　document.body.clientHeight)
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: Math.max(document.documentElement.scrollWidth,
　　　　　　　　　　　　　　　　document.documentElement.clientWidth),
　　　　　　　　height: Math.max(document.documentElement.scrollHeight,
　　　　　　　　　　　　　　　　document.documentElement.clientHeight)
　　　　　　}
　　　　}
　　}

四、获取网页元素的绝对位置

由于网页大小有绝对和相对之分，所以网页元素的位置也有绝对和相对之分。网页元素的左上角相对于整张网页左上角的坐标，就是绝对位置；相对于浏览器窗口左上角的坐标，就是相对位置。

Javascript 언어에서는 웹페이지 요소의 절대 좌표를 계산해야 합니다. 각 요소에는 요소의 왼쪽 상단 모서리와 상위 컨테이너(offsetParent 개체)의 왼쪽 상단 모서리 사이의 거리를 나타내는 offsetTop 및 offsetLeft 특성이 있습니다. 따라서 요소의 절대 좌표를 얻으려면 이 두 값을 누적하면 됩니다.

(그림 3 offsetTop 및 offsetLeft 속성)

절대 위치의 가로 좌표와 세로 좌표를 구하려면 다음 두 가지 함수를 사용할 수 있습니다.

함수 getElementLeft(요소){
var ActualLeft = element.offsetLeft;
var current = element.offsetParent;

　while (current !== null){
　actualLeft = current.offsetLeft;
　current = current.offsetParent;
　}

실제 왼쪽 반환;
}

함수 getElementTop(element){
var ActualTop = element.offsetTop;
var current = element.offsetParent;

　while (current !== null){
　actualTop = current.offsetTop;
　current = current.offsetParent;
　}

실제 Top 반환;
}

테이블과 iframe에서는 offsetParent 개체가 상위 컨테이너와 동일하지 않을 수 있으므로 위 함수는 테이블과 iframe의 요소에 적용되지 않습니다.

5. 웹 요소의 상대적 위치 구하기

요소의 절대 위치를 얻은 후에는 절대 좌표에서 스크롤 막대의 스크롤 거리를 빼면 상대 위치를 쉽게 얻을 수 있습니다. 스크롤 막대의 세로 거리는 문서 객체의 scrollTop 속성이고, 스크롤 막대의 가로 거리는 문서 객체의 scrollLeft 속성입니다.

(그림 4 scrollTop 및 scrollLeft 속성)

이전 섹션의 두 함수를 이에 맞게 다시 작성하세요.

함수 getElementViewLeft(요소){
var ActualLeft = element.offsetLeft;
var current = element.offsetParent;

　while (current !== null){
　actualLeft = current.offsetLeft;
　current = current.offsetParent;
　}

if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} else {
🎜>
실제Left-elementScrollLeft 반환;

}

함수 getElementViewTop(element){

var ActualTop = element.offsetTop;

var current = element.offsetParent;

　while (current !== null){

　actualTop = current.offsetTop;

　current = current.offsetParent;
　}

if (document.compatMode == "BackCompat"){

var elementScrollTop=document.body.scrollTop;

} else {
🎜>
실제Top-elementScrollTop을 반환합니다.
}

scrollTop 및 scrollLeft 속성에 값을 할당할 수 있으며 웹페이지를 해당 위치로 즉시 자동 스크롤하므로 웹페이지 요소의 상대적 위치를 변경하는 데 사용할 수 있습니다. 또한 element.scrollIntoView() 메서드도 유사한 효과를 가지며, 이를 통해 웹 페이지 요소가 브라우저 창의 왼쪽 상단에 표시되도록 할 수 있습니다.

6. 요소 위치를 얻는 빠른 방법

위 기능 외에도 웹페이지 요소의 위치를 ​​즉시 가져오는 빠른 방법도 있습니다. 즉, getBoundingClientRect() 메서드를 사용하는 것입니다. 이는 네 가지 속성(left, right, top, Bottom)을 포함하는 객체를 반환합니다. 이 속성은 각각 브라우저 창(뷰포트)의 왼쪽 상단 모서리를 기준으로 요소의 왼쪽 상단 모서리와 오른쪽 하단 모서리 사이의 거리에 해당합니다. .

따라서 웹페이지 요소의 상대적 위치는

바

절대 위치를 얻으려면 스크롤 거리를 추가하세요

바

현재 IE, Firefox 3.0, Opera 9.5는 모두 이 방법을 지원하지만 Firefox 2.x, Safari, Chrome, Konqueror에서는 지원하지 않습니다.

(끝)