瀏覽器視窗大小 網頁大小 元素位置

2021-09-13 22:16:24 字數 1706 閱讀 1584

部分摘錄自阮一峰老師部落格:
一張網頁的全部面積,就是它的大小。通常情況下,網頁的大小由內容和css樣式表決定。

瀏覽器視窗的大小,則是指在瀏覽器視窗中看到的那部分網頁面積,又叫做viewport(視口)。

注意事項

const getviewport = () =>

}

如果網頁內容能夠在瀏覽器視窗中全部顯示,不出現滾動條,那麼網頁的clientwidth和scrollwidth應該相等。但是實際上,不同瀏覽器有不同的處理,這兩個值未必相等。所以,我們需要取它們之中較大的那個值
const getpagearea = () =>

}

指該元素的左上角相對於整張網頁左上角的座標。這個絕對位置要通過計算才能得到。
不斷累加offsetparent的offsettop和offsetleft屬性

由於在**和iframe中,offsetparent物件未必等於父容器,所以上面的函式對於**和iframe中的元素不適用。

function getelementleft(element)

return actualleft;

}function getelementtop(element)

return actualtop;

}

利用getboundingclientrect方法

此方法其中包含了left、right、top、bottom四個屬性,分別對應了該元素的左上角和右下角相對於瀏覽器視窗(viewport)左上角的距離.(其實也就是網頁元素的相對位置)

var x= this.getboundingclientrect().left+document.documentelement.scrollleft;

var y =this.getboundingclientrect().top+document.documentelement.scrolltop;

網頁元素的相對位置,指該元素左上角相對於瀏覽器視窗左上角的座標。
有了絕對位置以後,獲得相對位置就很容易了,只要將絕對座標減去頁面的滾動條滾動的距離就可以了 也就是減去document.documentelement.scrollleft|scrolltop

//快捷方法

var x= this.getboundingclientrect().left;

var y =this.getboundingclientrect().top;

返回當前頁面的滾動位置。請使用pagexoffset和pageyoffset, 如果已定義,否則使用scrollleft和scrolltop。你可以省略el來使用視窗的預設值。pagexoffset是scrolly的別名(event.pagex是滑鼠活動事件的屬性)

const getscrollposition = (el = window) =>);

}// getscrollposition() ->

const scrolltotop = () =>

}

瀏覽器視窗的大小

var w window.innerwidth document.documentelement.clientwidth document.body.clientwidth var h window.innerheight document.documentelement.clientheight ...

JS 獲取瀏覽器視窗大小

js 獲取瀏覽器視窗大小 獲取視窗寬度 if window.innerwidth winwidth window.innerwidth else if document.body document.body.clientwidth winwidth document.body.clientwidth...

JS 獲取瀏覽器視窗大小

js 獲取瀏覽器視窗大小 js 獲取瀏覽器視窗大小 獲取視窗寬度 if window.innerwidth winwidth window.innerwidth else if document.body document.body.clientwidth winwidth document.bod...