[ad#content]在JS操作DOM的时候，会经常用到浏览器的高度和宽度来调节DOM的位置，这里特别记录一下。
| 代码如下 | 复制代码 |
|
<script language="javascript"> function getDocumentSize(){ var str = ''; str+=document.body.clientWidth+"rn";//网页可见区域宽 str+=document.body.clientHeight+"rn";//网页可见区域高 str+=document.body.offsetWidth+"rn";//网页可见区域高(包括边线的宽) str+=document.body.offsetHeight+"rn";//网页可见区域高(包括边线的宽) str+=document.body.scrollWidth+"rn";//网页正文全文宽 str+=document.body.scrollHeight+"rn";//网页正文全文高 str+=document.body.scrollTop+"rn";//网页被卷去的高 str+=document.body.scrollLeft+"rn";//网页被卷去的左 str+=window.screenTop+"rn";//网页正文部分上 str+=window.screenLeft+"rn";//网页正文部分左 str+=window.screen.height+"rn";//屏幕分辨率的高 str+=window.screen.width+"rn";//屏幕分辨率的宽 str+=window.screen.availHeight+"rn";//屏幕可用工作区高度 str+=window.screen.availWidth+"rn";//屏幕可用工作区宽度 alert(str); } </script> |
|
这里特别提示两点：
1、document.body.scrollTop与document.body.clientHeight有的时候是无效的，究其原因是因为声明了DOCTYPE：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
当声明了DOCTYPE以后，document.body.scrollTop的值永远等于0，解决的办法是把document.body用document.documentElement替换即可。
2、window.screenTop 与window.screenLeft在Firefox中是没有定义的，它仅能在IE里发挥作用，指的是网页正文部分上与显示器屏幕上的边的距离，刚测试这个的时候我也不是很清楚，其实这个高度也是很有用的，当你需要使用open函数打开一个窗口的时候，就可以利用这个距离来给新打开的窗口定位。
例
| 代码如下 | 复制代码 |
|
function calc_scroll_xy() { _browser_scroll_x = 0; _browser_scroll_y = 0; if( typeof( window.pageyoffset ) == 'number' ) { //netscape compliant _browser_scroll_y = window.pageyoffset; _browser_scroll_x = window.pagexoffset; } else if( document.body && ( document.body.scrollleft || document.body.scrolltop ) ) { //dom compliant _browser_scroll_y = document.body.scrolltop; _browser_scroll_x = document.body.scrollleft; } else if( document.documentelement && ( document.documentelement.scrollleft || document.documentelement.scrolltop ) ) { //ie6 standards compliant mode _browser_scroll_y = document.documentelement.scrolltop; _browser_scroll_x = document.documentelement.scrollleft; } } |
|
JQuery:
| 代码如下 | 复制代码 |
|
$(document).ready(function(){ alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度 }) |
|
1、已经能支持获取多浏览器的内部的视口的宽度和高度信息
2、在IE 9中已经和其他的浏览器(Opera、Chrome、FirFox、Safari)一样，已经能支持用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth这四个属性获取浏览器的窗口、视口的宽度高度信息,但是IE9以前的IE版本是没有这些属性的，因此在这样的情况下，我将视口和窗口的概念等同起来了。
2、虽然window有宽度和高度信息，但是不一定是真正浏览器窗口的真正的宽度和高度信息。因为有些浏览器返回的结果中就不含菜单栏、工具栏等的高度信息。
实例演示：
在一个垂直内容过多的页面中，使一个DIV总能保持在视口的中心位置(非精确中心位置)：
代码：
| 代码如下 | 复制代码 |
| window.onload = window.onresize = function () { var top = Math.round(Browser.Page.scrollTop() + (Browser.ViewPort.height() / 2) - (parseInt(document.getElementById("divCenter").style.height) / 2)); var left = Math.round(Browser.Page.scrollLeft() + (Browser.ViewPort.width() / 2) - (parseInt(document.getElementById("divCenter").style.width) / 2)); document.getElementById("divCenter").style.top = top + "px"; document.getElementById("divCenter").style.left = left + "px"; } |
|