JS获取屏幕、浏览器、网页高度，宽度信息定位
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章来给在大家介绍关于JS获取屏幕、浏览器、网页高度，宽度信息定位,各位朋友可进入参考。...
|
[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()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})
|
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";
}
|
|
