用Javascript取得頁面元素的具體位置_javascript技巧

製作網頁的過程中，你有時候需要知道某個元素在網頁上的確切位置。

以下的教學總結了Javascript在網頁定位方面的相關知識。

一、網頁的大小和瀏覽器視窗的大小

首先，要先明確兩個基本概念。

一張網頁的全部面積，就是它的大小。通常情況下，網頁的大小由內容和CSS樣式表決定。

瀏覽器視窗的大小，則是指在瀏覽器視窗中看到的那部分網頁面積，又叫做viewport（視窗）。

很顯然，如果網頁的內容能夠在瀏覽器視窗中全部顯示（也就是不出現捲軸），那麼網頁的大小和瀏覽器視窗的大小是相等的。如果無法全部顯示，則捲動瀏覽器窗口，可以顯示出網頁的各個部分。

二、取得網頁的大小

網頁上的每個元素，都有clientHeight和clientWidth屬性。這兩個屬性指元素的內容部分再加上padding的所佔據的視覺面積，不包括border和捲軸所佔用的空間。
 
（圖一 clientHeight和clientWidth屬性）

因此，document元素的clientHeight和clientWidth屬性，就代表了網頁的大小。

複製程式碼 程式碼如下:

　　function getgetViewport(){ 　　　　　　return {
　　　　　　　　width: 　ument.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　return {
　　　　　return { 🎜>　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height:　　　　　] 🎜>　　　　}
　　}


上面的getViewport函數就可以回傳瀏覽器視窗的高和寬。使用的時候，有三個地方要注意：

1）這個函數必須在頁面載入完成後才能運行，否則document物件還沒生成，瀏覽器會報錯。

2）大多數情況下，都是document.documentElement.clientWidth傳回正確值。但是，在IE6的quirks模式中，document.body.clientWidth傳回正確的值，因此函數中加入了對文件模式的判斷。

3）clientWidth和clientHeight都是唯讀屬性，不能對它們賦值。

三、取得網頁大小的另一種方法


網頁上的每個元素還有scrollHeight和scrollWidth屬性，指包含捲軸在內的該元素的視覺面積。 那麼，document物件的scrollHeight和scrollWidth屬性就是網頁的大小，意思是滾動條滾過的所有長度和寬度。

仿照getViewport()函數，可以寫出getPagearea()函數。




複製程式碼

程式碼如下: 　　function getgetgets()> compatMode == "BackCompat"){ 　　　　　　return {

　　　　　　　　width: 　科　　　　　　width: 　外.body.scroll　　〜〜〜idth: 『 ument.body.scrollHeight

　　　　　　}
　　　　} else {
　　　　　return {
　　　　　return { 🎜>　　　　　　　　width: document.documentElement.scrollWidth,
　　　　　　　　height:　　　　〔　　　height: 26 🎜>　　　　}
　　}


但是，這個函數有一個問題。如果網頁內容能夠在瀏覽器視窗中全部顯示，不出現捲軸，那麼網頁的clientWidth和scrollWidth應該會相等。但實際上，不同瀏覽器有不同的處理，這兩個值未必相等。所以，我們需要取它們之中較大的那個值，因此要對getPagearea()函數進行改寫。




複製程式碼

程式碼如下:

function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
寬度: Math.max(document.body.scrollWidth, 文件.body.clientWidth),
高度: Math.max(document.body.scrollHeight,
文檔.body.clientHeight)
}
文檔.body. else {
return {寬度： Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
高度: Math.max(document.documentElement.scrollHeight,Element.scrollHeight,
高度: Math.max(document.documentElement.scrollHeight, . >文檔.documentElement.clientHeight)
​​​}
}
}

四、獲取網頁元素的絕對位置
網頁元素的絕對位置，指該元素的頂點相對於整

首先，每個元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對象）的左上角所以，這相當於這兩個值進行累加，就可以得到該元素的絕對座標。

 
（圖二 offsetTop 和 offsetLeft 屬性）
以下兩個函數可以用來取得絕對位置的橫座標和縱座標。

複製程式碼程式碼如下：

函數getElementLeft(element){

函數getElementLeft(element){


.offsetLeft;
var current = element.offsetParent;

while (current !== null){
實際Left = current.offsetLeft;
電流=電流. 🎜}

回傳實際左;
}

function getElementTop(element){
varactualTop = element.offsetTop;
while (current !== null){
實際Top = current.offsetTop;
電流=電流.offsetParent;
🎜}

返回實際頂部； 返回實際頂部； 🎜>

由於在表單和iframe中，offsetParent物件不一定等於父容器，所以上面的函數對於表單和iframe中的元素不適用。


五、取得網頁元素的相對位置
網頁元素的相對位置，指該元素左上角相對於瀏覽器視窗左上角的座標。

有了絕對位置以後，獲得相對位置就很容易了，只需將絕對坐標浮動頁面的滾動條滾動的距離就可以了。 捲軸滾動的垂直距離，是文件物件的scrollTop屬性；捲軸滾動的距離等級是文件物件的scrollLeft

 （圖三scrollTop和scrollLeft屬性）

對上一節中的兩個函數進行相應的改寫：

複製代碼 代碼如下：

function getElementViewLeft(element){


var effectiveLeft = element.offsetLeft;
var current = element.offsetParent;

var current = element.offsetParent;

whiull (current !🎜>實際Left = current.offsetLeft;
電流=電流.offsetParent;
}

if (document.compatMode == "BackCompat"){
ﻻ＿＿＿ document.body.scrollLeft;
🎜} else {
🎜>var elementScrollLeft=document.documentElement.scrollLeft;
🎜}

function getElementViewTop(element){
varactualTop = element.offsetTop;
var current = element.offsetParent;
電流=電流.offsetParent;
}

if (document.compatMode == "BackCompat"){
悿＿很好=document.body.scrollTop;
} else {
var elementScrollTop = document.documentElement.scrollTop;
🎜}

回擊

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

6. 요소의 위치를 ​​빠르게 가져오는 방법

위의 기능 외에도 웹페이지의 위치를 ​​빠르게 가져오는 방법이 있습니다. 즉시 요소.

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

그래서 웹페이지 요소의 상대적인 위치는

코드를 복사하세요 코드는 다음과 같습니다. 🎜>

var

코드 복사

코드는 다음과 같습니다. var 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는 지원하지 않습니다.