javascript 獲取網頁各種寬度

頁可見區域寬：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文檔所在窗口的當前寬度。

實現代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

<head>

<title>請調整瀏覽器窗口</title>

</head>

<body>

<h2 align="center">請調整瀏覽器窗口大小</h2><hr>

瀏覽器窗口的實際高度: <input type="text" name="availHeight" size="4"><br>

瀏覽器窗口的實際寬度: <input type="text" name="availWidth" size="4"><br>

</form>

<!--

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 ( )函數，完成整個操作。

HTML DOM 節點

在 HTML DOM (Document Object Model) 中 , 每一個元素都是節點:

文檔是一個文檔。
所有的HTML元素都是元素節點。
所有 HTML 屬性都是屬性節點。
文本插入到 HTML 元素是文本節點。are text nodes。
注釋是注釋節點。

Document 對象

當瀏覽器載入 HTML 文檔, 它就會成為 document 對象。

document 對象是HTML文檔的根節點與所有其他節點（元素節點，文本節點，屬性節點, 注釋節點）。

Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。

提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。

瀏覽器支持

所有主要瀏覽器都支持 Document 對象。

Document 對象屬性和方法

HTML文檔中可以使用以上屬性和方法:

屬性 / 方法	描述
document.activeElement	返回當前獲取焦點元素
document.addEventListener()	向文檔添加句柄
document.adoptNode(node)	從另外一個文檔返回 adapded 節點到當前文檔。
document.anchors	返回對文檔中所有 Anchor 對象的引用。
document.applets	返回對文檔中所有 Applet 對象的引用。
document.baseURI	返回文檔的絕對基礎 URI
document.body	返回文檔的body元素
document.close()	關閉用 document.open() 方法打開的輸出流，并顯示選定的數據。
document.cookie	設置或返回與當前文檔有關的所有 cookie。
document.createAttribute()	創建一個屬性節點
document.createComment()	createComment() 方法可創建注釋節點。
document.createDocumentFragment()	創建空的 DocumentFragment 對象，并返回此對象。
document.createElement()	創建元素節點。
document.createTextNode()	創建文本節點。
document.doctype	返回與文檔相關的文檔類型聲明 (DTD)。
document.documentElement	返回文檔的根節點
document.documentMode	返回用于通過瀏覽器渲染文檔的模式
document.documentURI	設置或返回文檔的位置
document.domain	返回當前文檔的域名。
document.domConfig	返回normalizeDocument()被調用時所使用的配置
document.embeds	返回文檔中所有嵌入的內容（embed）集合
document.forms	返回對文檔中所有 Form 對象引用。
document. getElementsByClassName()	返回文檔中所有指定類名的元素集合，作為 NodeList 對象。
document.getElementById()	返回對擁有指定 id 的第一個對象的引用。
document.getElementsByName()	返回帶有指定名稱的對象集合。
document.getElementsByTagName()	返回帶有指定標簽名的對象集合。
document.images	返回對文檔中所有 Image 對象引用。
document.implementation	返回處理該文檔的 DOMImplementation 對象。
document.importNode()	把一個節點從另一個文檔復制到該文檔以便應用。
document.inputEncoding	返回用于文檔的編碼方式（在解析時）。
document.lastModified	返回文檔被最后修改的日期和時間。
document.links	返回對文檔中所有 Area 和 Link 對象引用。
document.normalize()	刪除空文本節點，并連接相鄰節點
document.normalizeDocument()	刪除空文本節點，并連接相鄰節點的
document.open()	打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。
document.querySelector()	返回文檔中匹配指定的CSS選擇器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節點列表
document.readyState	返回文檔狀態 (載入中……)
document.referrer	返回載入當前文檔的文檔的 URL。
document.removeEventListener()	移除文檔中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者屬性節點。
document.scripts	返回頁面中所有腳本的集合。
document.strictErrorChecking	設置或返回是否強制進行錯誤檢查。
document.title	返回當前文檔的標題。
document.URL	返回文檔完整的URL
document.write()	向文檔寫 HTML 表達式或 JavaScript 代碼。
document.writeln()	等同于 write() 方法，不同的是在每個表達式之后寫一個換行符。

警告 !!!

在 W3C DOM核心，文檔對象繼承節點對象的所有屬性和方法。

很多屬性和方法在文檔中是沒有意義的。

HTML 文檔對象可以避免使用這些節點對象和屬性：

屬性 / 方法	避免的原因
document.attributes	文檔沒有該屬性
document.hasAttributes()	文檔沒有該屬性
document.nextSibling	文檔沒有下一節點
document.nodeName	這個通常是 #document
document.nodeType	這個通常是 9(DOCUMENT_NODE)
document.nodeValue	文檔沒有一個節點值
document.ownerDocument	文檔沒有主文檔
document.ownerElement	文檔沒有自己的節點
document.parentNode	文檔沒有父節點
document.previousSibling	文檔沒有兄弟節點
document.textContent	文檔沒有文本節點

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

下是一個使用VBA獲取HTMLDocument對象并獲取網頁元素的示例代碼：

```vba

Sub GetHTMLDocument()

' 聲明對象變量

Dim IE As Object

Dim HTMLDoc As Object

' 創建 Internet Explorer 對象

Set IE = CreateObject("InternetExplorer.Application")

' 設置是否可見

IE.Visible = False

' 打開網頁

IE.Navigate "http://www.example.com"

' 等待頁面加載完成

Do While IE.Busy Or IE.ReadyState <> 4

DoEvents

Loop

' 獲取 HTMLDocument 對象

Set HTMLDoc = IE.Document

' 獲取網頁元素示例

Dim inputElements As Object

Dim tdElements As Object

Dim classNameElements As Object

' 獲取 <input> 元素集合

Set inputElements = HTMLDoc.getElementsByTagName("input")

' 遍歷 <input> 元素集合

For Each element In inputElements

' 在這里進行你的操作

Debug.Print element.ID ' 輸出元素ID屬性

Next element

' 獲取 <td> 元素集合

Set tdElements = HTMLDoc.getElementsByTagName("td")

' 遍歷 <td> 元素集合

For Each element In tdElements

' 在這里進行你的操作

Debug.Print element.innerText ' 輸出元素文本內容

Next element

' 獲取具有指定類名的元素集合

Set classNameElements = HTMLDoc.getElementsByClassName("classname")

' 遍歷具有指定類名的元素集合

For Each element In classNameElements

' 在這里進行你的操作

Debug.Print element.innerText ' 輸出元素文本內容

Next element

' 關閉 Internet Explorer

IE.Quit

' 釋放對象變量

Set IE = Nothing

Set HTMLDoc = Nothing

Set inputElements = Nothing

Set tdElements = Nothing

Set classNameElements = Nothing

End Sub

```

上述代碼使用Internet Explorer創建一個無界面的瀏覽器對象（IE對象），并加載指定的網頁。然后，利用IE對象的Document屬性可以獲取到網頁的HTMLDocument對象，通過HTMLDocument對象可以獲取指定元素。示例中展示了如何獲取 `<input>` 元素、`<td>` 元素和具有指定類名的元素集合，并對獲取到的元素進行簡單操作。你可以根據網頁的實際結構和需要進一步擴展和修改代碼。

在線咨詢

上一篇：jQuery如何實現下拉菜單
下一篇：HTML5Plus 構建 APP 的截圖保存功能

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

javascript 獲取網頁各種寬度

您的項目需求