獲取瀏覽器和屏幕的寬高

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth

網(wǎng)頁可見區(qū)域高: document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高: document.body.offsetHeight (包括邊線的高)

網(wǎng)頁正文全文寬: document.body.scrollWidth

網(wǎng)頁正文全文高: document.body.scrollHeight

網(wǎng)頁被卷去的高: document.body.scrollTop

網(wǎng)頁被卷去的左: document.body.scrollLeft

網(wǎng)頁正文部分上: window.screenTop

網(wǎng)頁正文部分左: window.screenLeft

屏幕分辨率的高: window.screen.height

屏幕分辨率的寬: window.screen.width

屏幕可用工作區(qū)高度: window.screen.availHeight

屏幕可用工作區(qū)寬度: window.screen.availWidth

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 獲取對象的滾動高度。

scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

scrollWidth:獲取對象的滾動寬度

offsetHeight:獲取對象相對于版面或由父坐標(biāo)?

offsetParent 屬性指定的父坐標(biāo)的高度

offsetLeft:獲取對象相對于版面或由

offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置

offsetTop:獲取對象相對于版面或由

offsetTop 屬性指定的父坐標(biāo)的計算頂端位置

event.clientX 相對文檔的水平座標(biāo)

event.clientY 相對文檔的垂直座標(biāo)

event.offsetX 相對容器的水平坐標(biāo)

event.offsetY 相對容器的垂直坐標(biāo)

document.documentElement.scrollTop 垂直方向滾動的值

event.clientX+document.documentElement.scrollTop 相對文檔的水平座標(biāo)+垂直方向滾動的量

1、網(wǎng)頁可見區(qū)域?qū)捀?,不包括工具欄和滾動條(瀏覽器窗口可視區(qū)域大?。?/b>

1.對于IE9+、chrome、firefox、Opera、Safari:

window.innerHeight瀏覽器窗口的內(nèi)部高度;

window.innerWidth瀏覽器窗口的內(nèi)部寬度;

2.對于IE8.7.6.5:

document.documentElement.clientHeight:表示HTML文檔所在窗口的當(dāng)前高度;

document.documentElement.clientWidth:表示HTML文檔所在窗口的當(dāng)前寬度;

或者,因為document對象的body屬性對應(yīng)HTML文檔的<body>標(biāo)簽,所以也可表示為:

document.body.clientHeight:表示HTML文檔所在窗口的當(dāng)前高度;

document.body.clientWidth:表示HTML文檔所在窗口的當(dāng)前寬度;

結(jié)論:

document.body.clientWidth/Height:的寬高偏小,高甚至默認(rèn)200;

document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的寬高始終相等。

所以在不同瀏覽器都實用的的Javascripit方案:

1、var w = document.documentElement.clientWidth || document.body.clientWidth;

2、var h = document.documentElement.clientHeight || document.body.clientHeight;

二:網(wǎng)頁正文全文寬高

scrollWidth和scrollHeight獲取網(wǎng)頁內(nèi)容高度和寬度

1.針對IE.Opera:scrollHeight是網(wǎng)頁內(nèi)容實際高度,可以小于clientHeight;

2.針對NS.firefox:scrollHeight是網(wǎng)頁內(nèi)容高度,不過最小值是clientHeight;也就是說網(wǎng)頁內(nèi)容實際高度小于clientHeight的時候,scrollHeight返回clientHeight;

3.瀏覽器兼容代碼:

1、var w = document.documentElement.scrollWidth || document.body.scrollWidth;

2、var h = document.documentElement.scrollHeight || document.body.scrollHeight;

三:網(wǎng)頁可見區(qū)域?qū)捀?,包括滾動條等邊線(會隨窗口的顯示大小改變)

1.值:offsetWidth = scrollWidth + 左右滾動條 +左右邊框;

   offsetHeight = scrollHeight + 上下滾動條 + 上下邊框;

2.瀏覽器兼容代碼:

1、var w = document.documentElement.offsetWidth || document.body.offsetWidth ;

2、var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

四:網(wǎng)頁卷去的距離與偏移量

1.scrollLeft:設(shè)置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離;

2.scrollTop:設(shè)置或獲取位于給定對象最頂端與窗口中目前可見內(nèi)容的最左端之間的距離;

3.offsetLeft:設(shè)置或獲取位于給定對象相對于版面或由offsetParent屬性指定的父坐標(biāo)的計算左側(cè)位置;

4.offsetTop:設(shè)置或獲取位于給定對象相對于版面或由offsetParent屬性指定的父坐標(biāo)的計算頂端位置;

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 夜鶯2517閱讀 128,184評論 1 9
  • 版本:ios 1.2.1 亮點: 1.app角標(biāo)可以實時更新天氣溫度或選擇空氣質(zhì)量,建議處女座就不要選了,不然老想...
    我就是沉沉閱讀 7,475評論 1 6
  • 我是黑夜里大雨紛飛的人啊 1 “又到一年六月,有人笑有人哭,有人歡樂有人憂愁,有人驚喜有人失落,有的覺得收獲滿滿有...
    陌忘宇閱讀 8,869評論 28 54
  • 兔子雖然是枚小碩 但學(xué)校的碩士四人寢不夠 就被分到了博士樓里 兩人一間 在學(xué)校的最西邊 靠山 兔子的室友身體不好 ...
    待業(yè)的兔子閱讀 2,776評論 2 9

友情鏈接更多精彩內(nèi)容