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>