javascript獲取和判斷瀏覽器窗/屏幕/網頁的高度/寬度等
來源:易賢網 閱讀:1839 次 日期:2014-05-09 15:10:53
溫馨提示:易賢網小編為您整理了“javascript獲取和判斷瀏覽器窗/屏幕/網頁的高度/寬度等”,方便廣大網友查閱!

這篇文章主要介紹了javascript獲取和判斷瀏覽器窗口、屏幕、網頁的高度、寬度等,需要的朋友可以參考下

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,F(xiàn)ireFox 差異如下:

IE6.0、FF1.06+:

代碼如下:

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均無關

網頁可見區(qū)域寬: document.body.clientWidth

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

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

網頁可見區(qū)域高: 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

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

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

技術要點

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

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

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

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

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

示例代碼

代碼如下:

<!DOCTYPE>

<html>

<head>

<title>

請調整瀏覽器窗口

</title>

<meta charset="utf8">

</head>

<body>

<h2 align="center">

請調整瀏覽器窗口大小

</h2>

<hr>

<form action="#" method="get" name="form1" id="form1">

<!--顯示瀏覽器窗口的實際尺寸-->

瀏覽器窗口 的 實際高度:

<input type="text" name="availHeight" size="4">

<br>

瀏覽器窗口 的 實際寬度:

<input type="text" name="availWidth" size="4">

<br>

</form>

<script type="text/javascript">

< !--

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函數:獲取尺寸

{

//獲取窗口寬度

if (window.innerWidth) winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth;

//獲取窗口高度

if (window.innerHeight) winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight;

//通過深入Document內部對body進行檢測,獲取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//結果輸出至兩個文本框

document.form1.availHeight.value = winHeight;

document.form1.availWidth.value = winWidth;

}

findDimensions();

//調用函數,獲取數值

window.onresize = findDimensions;

//-->

</script>

</body>

</html>

源程序解讀

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

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

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

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

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

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

更多信息請查看IT技術專欄

更多信息請查看網絡編程

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權所有:易賢網