JS取网页的阔与高－多种情况细细说来
日期：2014-05-16 浏览次数：20389 次
注：以下方法兼容IE6,7, FF3。
下面是取网页的宽与高，情况很复杂，有正文宽高，窗口宽高，可能有滚动条.
有滚动条时正文高一定大于窗口高，
无滚到条时正文高可能小于等于窗口高。
宽度同理，就不说了。
应用1
:用JS取浏览器窗口内侧的宽与高，动态调整页面的宽度（或高度），求：网页可见区域宽（或高），就是下面代码中的Width_4（Height_4）。
应用2
：做一个灰色的DIV蒙层蒙住整个页面，
页面本无滚动条时，DIV蒙层过大，反而会出现滚动条，所以DIV蒙层尺寸一定要精确，用“网页可见区域宽”，就是下面代码中的Width_4（Height_4）。
页面有滚动条时，DIV蒙层还要蒙住滚动动条隐藏起来的部分,用“滚动条宽1”
//DIV蒙层的宽度? Width_1>Width_4?Width_1:Width_4
//DIV蒙层的高度? Height_1>Height_4?Height_1:Height_4
var Width_1=document.body.scrollWidth; //滚动条宽1
var Height_1=document.body.scrollHeight; //滚动条高1
var Width_2=document.documentElement.scrollWidth; //滚动条宽2
var Height_2=document.documentElement.scrollHeight; //滚动条宽2
var Width_3=document.body.clientWidth; //body正文全文宽3
var Height_3=document.body.clientHeight; //body正文全文高3
var Width_4=document.documentElement.clientWidth; //网页可见区域宽，滚动条隐藏部分不算
var Height_4=document.documentElement.clientHeight; //网页可见区域高
var Width_5=window.screen.availWidth; //屏幕可用工作区宽度(用处不大)
var Height_5=window.screen.availHeight;//屏幕可用工作区高度
//DIV蒙层的宽度 Width_1>Width_4?Width_1:Width_4
//DIV蒙层的高度 Height_1>Height_4?Height_1:Height_4
alert("滚动条宽1 :"+Width_1+"，滚动条高1:"+Height_1+
",\n滚动条宽2:"+Width_2+"，滚动条高2:"+Height_2+
",\nbody正文全文宽3:"+Width_3+"，body正文全文高3:"+Height_3+
"，\n网页可见区域宽："+ Width_4+"，网页可见区域高："+Height_4+
",\n屏幕可用工作区宽度:"+Width_5+", 屏幕可用工作区高度："+Height_5
);
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
下面是从w3school查到的,说的不是很详细
根节点
有两种特殊的文档属性可用来访问根节点：
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。
<script type="text/javascript" language="javascript">
function setStyle()
{
document.getElementById("Test").style.width=document.body.clientWidth;
document.getElementById("Test").style.Hight=window.screen.availHeight;
document.getElementById("checkbox_sizemodellist").style.width=screen.width;
document.getElementById("checkbox_sizemodellist").style.Hight=screen.height;
document.getElementById("checkbox_sizemodellist").style.left=0;
document.getElementById("checkbox_sizemodellist").style.top=0;
}
</script>
网页可见区域宽： 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
