javascript 獲取網頁各種寬度

  • 時間:2018-07-22 22:13 作者:程序員小新人學習 來源:程序員小新人學習 閱讀:304
  • 掃一掃,手機訪問
摘要:網頁可見區域寬:document.body.clientWidth 網頁可見區域高:document.body.clientHeight 網頁可見區域寬:document.body.offsetWidth (包括邊線的寬) 網頁可見區域高:document.body.offsetHeight (包括

網頁可見區域寬:document.body.clientWidth

網頁可見區域高:document.body.clientHeight

網頁可見區域寬:document.body.offsetWidth (包括邊線的寬)

網頁可見區域高:document.body.offsetHeight (包括邊線的寬)

網頁正文全文寬:document.body.scrollWidth

網頁正文全文高:document.body.scrollHeight

網頁被卷去的高:document.body.scrollTop

網頁被卷去的左:document.body.scrollLeft

網頁正文部分上:window.screenTop

網頁正文部分左:window.screenLeft

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

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

屏幕可使用工作區高度:window.screen.availHeight

屏幕可使用工作區寬度:window.screen.availWidth

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

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

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

scrollTop:設置或者獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離

scrollWidth:獲取對象的滾動寬度

offsetHeight:獲取對象相對于版面或者由父坐標 offsetParent 屬性指定的父坐標的高度

offsetLeft:獲取對象相對于版面或者由 offsetParent 屬性指定的父坐標的計算左側位置

offsetTop:獲取對象相對于版面或者由 offsetTop 屬性指定的父坐標的計算頂端位置

event.clientX 相對文檔的水平座標

event.clientY 相對文檔的垂直座標

event.offsetX 相對容器的水平坐標

event.offsetY 相對容器的垂直坐標

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

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

IE,FireFox 差異如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin屬性,與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)

網頁可見區域寬: document.body.clientWidth

網頁可見區域高: document.body.clientHeight

網頁可見區域寬: document.body.offsetWidth (包括邊線的寬)

網頁可見區域高: document.body.offsetHeight (包括邊線的高)

網頁正文全文寬: document.body.scrollWidth

網頁正文全文高: document.body.scrollHeight

網頁被卷去的高: document.body.scrollTop

網頁被卷去的左: document.body.scrollLeft

網頁正文部分上: window.screenTop

網頁正文部分左: window.screenLeft

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

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

屏幕可使用工作區高度: window.screen.availHeight

屏幕可使用工作區寬度: window.screen.availWidth

-------------------

技術要點

本節代碼主要用了Document對象關于窗口的少量屬性,這些屬性的主要功能和使用法如下。

要得到窗口的尺寸,對于不同的瀏覽器,需要用不同的屬性和方法:若要檢測窗口的真實尺寸,在Netscape下需要用Window的屬性;在IE下需要 深入Document內部對body進行檢測;在DOM環境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。

Document對象的body屬性對應HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節點。

document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。

實現代碼

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

請調整瀏覽器窗口

請調整瀏覽器窗口大小


瀏覽器窗口 的 實際高度:

瀏覽器窗口 的 實際寬度:

广东11选5今天开奖

源程序解讀

(1)程序首先建立一個表單,包含兩個文本框,使用于顯示窗口當前的寬度和高度,并且,其數值會隨窗口大小的改變而變化。

(2)在隨后的JavaScript代碼中,首先定義了兩個變量winWidth和winHeight,使用于保存窗口的高度值和寬度值。

(3)而后,在函數findDimensions ( )中,用window.innerHeight和window.innerWidth得到窗口的高度和寬度,并將二者保存在前述兩個變量中。

(4)再通過深入Document內部對body進行檢測,獲取窗口大小,并存儲在前述兩個變量中。

(5)在函數的最后,通過按名稱訪問表單元素,結果輸出至兩個文本框。

(6)在JavaScript代碼的最后,通過調使用findDimensions ( )函數,完成整個操作。

javascript 獲取網頁各種寬度

  • 全部評論(0)
最新發布的資訊信息
【系統環境|服務器應用】在CentOS 7上如何安裝Gogs 0.11.53(2020-02-10 10:14)
【系統環境|】淘碼庫,據消息稱已被調查。淘碼庫源碼網,已經無法訪問!(2020-01-14 04:13)
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-16 16:48)
【系統環境|服務器應用】2020新網站如何讓百度快速收錄網站首頁最新方法,親測有用!免費(2019-12-16 16:46)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
手機二維碼手機訪問領取大禮包
返回頂部