最近接触到的一些js调用window窗体的属性及通过JavaScript获取页面大小

来源：互联网发布：苏州淘宝运营编辑：程序博客网时间：2024/05/29 14:51

一、使用document对象的属性设置网页窗口的大小：

　　网页可见区域宽：document.body.clientWidth----------这个是指：一个页面当前区域不到的大小
　　网页可见区域高：document.body.clientHeight----------类似上一个
　　网页可见区域宽：document.body.offsetWidth (包括边线的宽)--------较上面的略小，大概是滚动条一半的宽度
　　网页可见区域高：document.body.offsetHeight (包括边线的宽)-------同上
　　网页正文全文宽：document.body.scrollWidth---------看不出来和clientWidth大小一致
　　网页正文全文高：document.body.scrollHeight---------看不出来
　　网页被卷去的高：document.body.scrollTop
　　网页被卷去的左：document.body.scrollLeft
　　网页正文部分上：window.screenTop ---------不再是document树的属性，浏览器窗口距离屏幕左上的相对坐标
　　网页正文部分左：window.screenLeft ---------不再是document树的属性，浏览器窗口距离屏幕左上的相对坐标
　　屏幕分辨率的高：window.screen.height --------可用高度
　　屏幕分辨率的宽：window.screen.width
　　屏幕可用工作区高度：window.screen.availHeight ---------像素高度
　　屏幕可用工作区宽度：window.screen.availWidth

下面是我测试的时候的一次结果及代码：窗口模式下的谷歌浏览器


<script language="javascript" type="text/javascript">    $(function() {alert("document.body.clientWidth:"+document.body.clientWidth); //1296alert("document.body.clientHeight:"+document.body.clientHeight);//602alert("document.body.offsetWidth :"+document.body.offsetWidth );//1280alert("document.body.offsetHeight :"+document.body.offsetHeight );//574alert("document.body.scrollWidth:"+document.body.scrollWidth);//1296alert("document.body.scrollHeight:"+document.body.scrollHeight);//602alert("document.body.scrollTop:"+document.body.scrollTop);//0alert("document.body.scrollLeft:"+document.body.scrollLeft);//0alert("window.screenTop:"+window.screenTop);//20alert("window.screenLeft:"+window.screenLeft);//60alert("window.screen.height:"+window.screen.height);//768alert("window.screen.width:"+window.screen.width);//1366alert("window.screen.availHeight:"+window.screen.availHeight);//728alert("window.screen.availWidth:"+window.screen.availWidth);//1366</script>

最大化模式下的谷歌浏览器

<script language="javascript" type="text/javascript">    $(function() {alert("document.body.clientWidth:"+document.body.clientWidth); //1366alert("document.body.clientHeight:"+document.body.clientHeight);//602alert("document.body.offsetWidth :"+document.body.offsetWidth );//1280alert("document.body.offsetHeight :"+document.body.offsetHeight );//574alert("document.body.scrollWidth:"+document.body.scrollWidth);//1296alert("document.body.scrollHeight:"+document.body.scrollHeight);//602alert("document.body.scrollTop:"+document.body.scrollTop);//0alert("document.body.scrollLeft:"+document.body.scrollLeft);//0alert("window.screenTop:"+window.screenTop);//20alert("window.screenLeft:"+window.screenLeft);//60alert("window.screen.height:"+window.screen.height);//768alert("window.screen.width:"+window.screen.width);//1366alert("window.screen.availHeight:"+window.screen.availHeight);//728alert("window.screen.availWidth:"+window.screen.availWidth);//1366</script>

以下为网络上的内容，可供参考:
在IE、FireFox、Netscape等不同的浏览器里，对于document.body 的 clientHeight、offsetHeight 和 scrollHeight 有着不同的含义，比较容易搞混，现整理一下相关的内容：

　　clientHeight：在上述浏览器中, clientHeight 的含义是一致的，定义为网页内容可视区域的高度，即在浏览器中可以看到网页内容的高度，通常是工具条以下到状态栏以上的整个区域高度，与具体的网页页面内容无关。可以理解为，在屏幕上通过浏览器窗口所能看到网页内容的高度。

　　offsetHeight：关于offsetHeight，ie和firefox等不同浏览中意义有所不同，需要加以区别。在ie中，offsetHeight 的取值为 clientHeight加上滚动条及边框的高度；而firefox、netscape中，其取值为是实际网页内容的高度，可能会小于clientHeight。

　　scrollHeight：scrollHeight都表示浏览器中网页内容的高度，但稍有区别。在ie里为实际网页内容的高度，可以小于 clientHeight；在firefox 中为网页内容高度，最小值等于 clientHeight，即网页实际内容比clientHeight时，取clientHeight。

　　clientWidth、offsetWidth 和 scrollWidth 的含义与上述内容雷同，不过是高度变成宽度而已。

　　若希望clientHeight、offsetHeight和scrollHeight三个属性能取值一致的话，可以通过设置DOCTYPE，启用不同的解析器，如：<!DOCTYPE HTML PUBLIC "DTD XHTML 1.0 Transitional">，设置DOCTYPE后，这三个属性都表示实际网页内容的高度。