Javascript获取页面大小值的方法__XHTML1.0规范
来源：互联网 发布：c语言 for括号声明变量 编辑：程序博客网 时间：2024/06/02 12:53
Javascript获取页面大小值的方法
希望获得网页可见区域的高度,可以采用 document.body.clientHeight ,这是在HTML 4.0 标准上使用的. 现在的XHTML1.0规范不再支持上面们的方法,而是采用 document.documentElement.clientHeight 实现!
网页加了这么一行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
document.body.clientHeight就不可用,解决方法如下:
在Quirks渲染模式下<body>作为文档的根，所以可以用document.body.clientHeight得到文档的高度。而在Standard渲染模式下，<html>作为文档的根，需要使用document.documentElement.clientHeight才可以得到。此时document.body的高度和宽度都为0
--===----------------------------------------===--示例程序--===----------------------------------------===--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
--%>
<head>
<title>Screen Size Test</title>
< language="Java " type="text/Java ">
<!--
function displayScreenSize()
{
var docHeight =document.documentElement.clientHeight;//网页可见区域宽
var docHeightWithBorder=document.documentElement.offsetHeight //网页可见区域高(包括边线的宽)
var bodyWidth =document.body.clientWidth; //网页可见区域宽
var bodyHeight =document.body.clientHeight; //网页可见区域高
var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽)
var bodyHeightWithBorder=document.body.offsetHeight; //网页可见区域高(包括边线的宽)
var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽
var bodyHeightWithScroll=document.body.scrollHeight; //网页正文全文高
var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距
var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距
var windowTopHeight =window.screenTop; //网页正文部分上边距
var windowLeftWidth =window.screenLeft; //网页正文部分左边距
var screenHeight =window.screen.height; //屏幕分辨率的高
var screenWidth =window.screen.width; //屏幕分辨率的宽
var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度
var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度
var Str="<p>";
Str+="document.body.clientWidth -网页可见区域宽:<span class='data'>"+bodyWidth+"px</span><br>";
Str+="document.body.offsetWidth-网页可见区域宽(包括边线的宽):<span class='data'>"+bodyWidthWithBorder+"px</span><br>";
Str+="document.body.scrollWidth -网页正文全文宽:<span class='data'>"+bodyWidthWithScroll+"px</span><br>";
Str+="document.body.clientHeight-网页可见区域高:<span class='data'>"+bodyHeight+"px</span><br>";
Str+="document.body.scrollHeight-网页正文全文高:<span class='data'>"+bodyHeightWithScroll+"px</span><br>";
Str+="document.body.offsetHeight-网页可见区域高(包括边线的宽):<span class='data'>"+bodyHeightWithBorder+"px</span><br><br/>";
Str+="document.body.scrollTop网页被卷去的上边距:<span class='data'>"+bodyTopHeight+"px</span><br>";
Str+="document.body.scrollLeft网页被卷去的左边距:<span class='data'>"+bodyLeftWidth+"px</span><br>";
Str+="window.screenTop网页正文部分上边距:<span class='data'>"+windowTopHeight+"px</span><br>";
Str+="window.screenLeft网页正文部分左边距:<span class='data'>"+windowLeftWidth+"px</span><br>";
Str+="window.screen.height屏幕分辨率的高:<span class='data'>"+screenHeight+"px</span><br>";
Str+="window.screen.width 屏幕分辨率的宽:<span class='data'>"+screenWidth+"px</span><br>";
Str+="window.screen.availHeight 屏幕可用工作区高度:<span class='data'>"+screenAvailHeight+"px</span><br>";
Str+="window.screen.availWidth 屏幕可用工作区宽度:<span class='data'>"+screenAvailWidth+"px</span><br>";
Str+="</p><hr />"
Str+="document.documentElement.clientHeight -网页可见区域GAO:<span class='data'>"+docHeight+"px</span><br>";
Str+="document.documentElement.offsetHeight -网页可见区域GAO(包括边线):<span class='data'>"+docHeightWithBorder+"px</span><br>";
Str+="document.documentElement.offsetTop:<span class='data'>"+document.documentElement.offsetTop+"px</span><br>";
Str+="document.documentElement.offsetLeft:<span class='data'>"+document.documentElement.offsetLeft+"px</span><br>";
Str+="document.documentElement.offsetWidth:<span class='data'>"+document.documentElement.offsetWidth +"px</span><br>";
Str+="document.documentElement.clientWidth:<span class='data'>"+document.documentElement.clientWidth+"px</span><br>";
document.getElementById('dispaly').innerHTML=Str;
//t1.height =document.body .clientHeight ;
t1.height =document.documentElement .clientHeight ;
}
// -->
</ >
</head>
<body style="margin:0; " ="java :displayScreenSize();" ="java :displayScreenSize();">
<table id="t1">
<tr>
<td style="border-right: #000099 1px solid; ">
Screen Size Test
<hr align="left" size="1" noshade>
<span class="display">Now we get the screen size about this browser </span>
<br>
<span class="display" id="dispaly"></span>
<hr align="left" size="1" noshade>
<p align="right">
<span class="foot">Screen Size Test by <a href="http://apolloge.cnblogs.com/">apolloge</a>
</span>
</p>
<p>
</p>
</td>
</tr>
</table>
</body>
</html>
希望获得网页可见区域的高度,可以采用 document.body.clientHeight ,这是在HTML 4.0 标准上使用的. 现在的XHTML1.0规范不再支持上面们的方法,而是采用 document.documentElement.clientHeight 实现!
网页加了这么一行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
document.body.clientHeight就不可用,解决方法如下:
在Quirks渲染模式下<body>作为文档的根，所以可以用document.body.clientHeight得到文档的高度。而在Standard渲染模式下，<html>作为文档的根，需要使用document.documentElement.clientHeight才可以得到。此时document.body的高度和宽度都为0
--===----------------------------------------===--示例程序--===----------------------------------------===--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
--%>
<head>
<title>Screen Size Test</title>
< language="Java " type="text/Java ">
<!--
function displayScreenSize()
{
var docHeight =document.documentElement.clientHeight;//网页可见区域宽
var docHeightWithBorder=document.documentElement.offsetHeight //网页可见区域高(包括边线的宽)
var bodyWidth =document.body.clientWidth; //网页可见区域宽
var bodyHeight =document.body.clientHeight; //网页可见区域高
var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽)
var bodyHeightWithBorder=document.body.offsetHeight; //网页可见区域高(包括边线的宽)
var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽
var bodyHeightWithScroll=document.body.scrollHeight; //网页正文全文高
var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距
var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距
var windowTopHeight =window.screenTop; //网页正文部分上边距
var windowLeftWidth =window.screenLeft; //网页正文部分左边距
var screenHeight =window.screen.height; //屏幕分辨率的高
var screenWidth =window.screen.width; //屏幕分辨率的宽
var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度
var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度
var Str="<p>";
Str+="document.body.clientWidth -网页可见区域宽:<span class='data'>"+bodyWidth+"px</span><br>";
Str+="document.body.offsetWidth-网页可见区域宽(包括边线的宽):<span class='data'>"+bodyWidthWithBorder+"px</span><br>";
Str+="document.body.scrollWidth -网页正文全文宽:<span class='data'>"+bodyWidthWithScroll+"px</span><br>";
Str+="document.body.clientHeight-网页可见区域高:<span class='data'>"+bodyHeight+"px</span><br>";
Str+="document.body.scrollHeight-网页正文全文高:<span class='data'>"+bodyHeightWithScroll+"px</span><br>";
Str+="document.body.offsetHeight-网页可见区域高(包括边线的宽):<span class='data'>"+bodyHeightWithBorder+"px</span><br><br/>";
Str+="document.body.scrollTop网页被卷去的上边距:<span class='data'>"+bodyTopHeight+"px</span><br>";
Str+="document.body.scrollLeft网页被卷去的左边距:<span class='data'>"+bodyLeftWidth+"px</span><br>";
Str+="window.screenTop网页正文部分上边距:<span class='data'>"+windowTopHeight+"px</span><br>";
Str+="window.screenLeft网页正文部分左边距:<span class='data'>"+windowLeftWidth+"px</span><br>";
Str+="window.screen.height屏幕分辨率的高:<span class='data'>"+screenHeight+"px</span><br>";
Str+="window.screen.width 屏幕分辨率的宽:<span class='data'>"+screenWidth+"px</span><br>";
Str+="window.screen.availHeight 屏幕可用工作区高度:<span class='data'>"+screenAvailHeight+"px</span><br>";
Str+="window.screen.availWidth 屏幕可用工作区宽度:<span class='data'>"+screenAvailWidth+"px</span><br>";
Str+="</p><hr />"
Str+="document.documentElement.clientHeight -网页可见区域GAO:<span class='data'>"+docHeight+"px</span><br>";
Str+="document.documentElement.offsetHeight -网页可见区域GAO(包括边线):<span class='data'>"+docHeightWithBorder+"px</span><br>";
Str+="document.documentElement.offsetTop:<span class='data'>"+document.documentElement.offsetTop+"px</span><br>";
Str+="document.documentElement.offsetLeft:<span class='data'>"+document.documentElement.offsetLeft+"px</span><br>";
Str+="document.documentElement.offsetWidth:<span class='data'>"+document.documentElement.offsetWidth +"px</span><br>";
Str+="document.documentElement.clientWidth:<span class='data'>"+document.documentElement.clientWidth+"px</span><br>";
document.getElementById('dispaly').innerHTML=Str;
//t1.height =document.body .clientHeight ;
t1.height =document.documentElement .clientHeight ;
}
// -->
</ >
</head>
<body style="margin:0; " ="java :displayScreenSize();" ="java :displayScreenSize();">
<table id="t1">
<tr>
<td style="border-right: #000099 1px solid; ">
Screen Size Test
<hr align="left" size="1" noshade>
<span class="display">Now we get the screen size about this browser </span>
<br>
<span class="display" id="dispaly"></span>
<hr align="left" size="1" noshade>
<p align="right">
<span class="foot">Screen Size Test by <a href="http://apolloge.cnblogs.com/">apolloge</a>
</span>
</p>
<p>
</p>
</td>
</tr>
</table>
</body>
</html>
- Javascript获取页面大小值的方法__XHTML1.0规范
- javascript 获取页面、屏幕大小
- javascript 获取页面、屏幕大小
- javascript获取页面、屏幕大小
- javascript获取页面、屏幕大小
- jsp页面使用javascript获取文件的大小
- 用Javascript获取页面元素的位置、 大小
- Javascript页面宽度高度的获取方法
- Javascript获取页面、屏幕尺寸大小参数
- Javascript获取页面、屏幕尺寸大小参数
- Javascript获取页面、屏幕尺寸大小参数
- javascript 获取网页的大小
- javascript 获取浏览器的大小
- javascript获取页面的传值
- 最近接触到的一些js调用window窗体的属性及通过JavaScript获取页面大小
- 页面JS、javascript如何获取后台传到页面的值
- 获取web页面大小、分辨率等信息（javascript）
- javaScript获取元素位置以及元素页面大小总结
- DMA解释
- 作为南京人，我很惭愧
- 电脑串口及并口连接线大全
- DataView.RowStateFilter 属性
- Java命名规范
- Javascript获取页面大小值的方法__XHTML1.0规范
- Linux下的多线程编程
- oracle函数大全。日期函数
- 有些。
- Ubuntu8.10更新源整
- jar数字签名
- 如何让windows media player 自动播放视频文件
- 把.NET程序部署到没有安装.NET Framwork的机器上
- 【单片机】热敏打印机的经验
