用Javascript取得WEB页面的各种宽度高度

当前位置：阿米酷 » 编程设计(WEB互联网日志) » 文章正文

用Javascript取得WEB页面的各种宽度高度

时间: 2009-03-01 / 分类: 编程设计(WEB互联网日志) / 浏览次数: 人气：142 / 0个评论发表评论

WEB页面上有好多种高度和宽度，是可以用Javascript来取得的，但是不同浏览器取得的方法也不尽相同

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="阿米酷<www@amicool.net>" /> </head> <body> <script language=Javascript> function getInfo(){ 　　var s = ""; 　　s+=" 网页可见区域宽："+ document.body.clientWidth; 　　s += " 网页可见区域高："+ document.body.clientHeight; 　　s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"; 　　s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"; 　　s += " 网页正文全文宽："+ document.body.scrollWidth; 　　s += " 网页正文全文高："+ document.body.scrollHeight; 　　s += " 网页被卷去的高(ff)："+ document.body.scrollTop; 　　s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop; 　　s += " 网页被卷去的左："+ document.body.scrollLeft; 　　s += " 网页正文部分上："+ window.screenTop; 　　s += " 网页正文部分左："+ window.screenLeft; 　　s += " 屏幕分辨率的高："+ window.screen.height; 　　s += " 屏幕分辨率的宽："+ window.screen.width; 　　s += " 屏幕可用工作区高度："+ window.screen.availHeight; 　　s += " 屏幕可用工作区宽度："+ window.screen.availWidth; 　　s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; 　　s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; 　　alert (s); } getInfo(); </script> </body> </html>

提示：你可以先修改部分代码再运行。

　　W3C的标准是需要定义的，如在页面中添加这行标记的话
　　<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>　

　　在IE中：

　　document.body.clientWidth ==> BODY对象宽度

　　document.body.clientHeight ==> BODY对象高度

　　document.documentElement.clientWidth ==> 可见区域宽度

　　document.documentElement.clientHeight ==> 可见区域高度

　　在FireFox中：

　　document.body.clientWidth ==> BODY对象宽度

　　document.body.clientHeight ==> BODY对象高度

　　document.documentElement.clientWidth ==> 可见区域宽度

　　document.documentElement.clientHeight ==> 可见区域高度

　　在Opera中：

　　document.body.clientWidth ==> 可见区域宽度

　　document.body.clientHeight ==> 可见区域高度

　　document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

　　document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

　　而如果没有定义W3C的标准，则

　　IE为：

　　document.documentElement.clientWidth ==> 0

　　document.documentElement.clientHeight ==> 0

　　FireFox为：

　　document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

　　Opera为：

　　document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

一	二	三	四	五	六	日
« Aug
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

阿米酷 – WEB编程和WEB设计经验技巧生活影集、电影感想和日常摄影的收藏记录