<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="HTTP://www.jzread.com/1999/xhtml">
<head>
<meta HTTP-equiv="content-type" content="text/html; charset=gb2312" />
<title>網頁特效獲得螢幕，瀏覽器，網頁高度寬代碼</title>
主要使用了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文檔所在視窗的當前寬度。
js獲得螢幕，瀏覽器，網頁高度寬度
網頁可見區域寬：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均無關
</head>
<body>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
