1.窗口大小:
查看《javascript高级程序设计》一书的 Page162,得出结论:
1.无法取得兼容所有浏览器的 浏览器窗口的总大小( outerWidth() && outerHeigth() ),(safari和firefox可以)
2.除ie之外的浏览器都可以获得视口(viewport)的大小( innerWidth() && innerHeigth() )。
3.在大多浏览器中保存了document.documentElement.clientWidth 和 document.documentElement.clientHeight;
(但是 ie6 必须保证是在 标准模式下才有效),如果是混杂模式则,需要document.body.clientWidth 和 document.body.clientHeight
所以:此书提供了获取 页面视口大小的 方法(包括滚动条的宽度):
var pageWidth=window.innerWidth, pageHeight=window.innerHeight;
if( typeof pageWidth !=="number" ){ //支持IE而写(因为ie9以后才支持innerWidth/innerHeight直取)
if(document.compatMode=="CSS1Compat"){ // 标准模式下
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else { //怪异模式下
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}
2.文档大小:
滚动区域大小:之前一直不大理解scrollHeight和scrollWidth 的意思 ,这本书确实很好。参看P264
带有滚动条时:通常认为<html>是web浏览器中滚动的元素,所以带有滚动条的页面的总高度是:
document.documentElement.scrollHeight
不带滚动条时:由于各个浏览器的不兼容,要想获得文档(基于视口的最小高度)的总高度,必须取得scrollHeight、clientHeight的最大值。
var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
ie混杂模式下,需要用document.body 替代 document.documentElement(判断方法同前)
offsetHeight;offsetWidth (包括内容+padding+border+滚动条的高度宽度(不包括margin))
元素的客户区大小
clientWidth;clientHeight(包括内容+padding)
那么利用jquery呢?如下:
获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width(); //应该指的是可视区域,包含滚动条在内。
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :$(document).width();
获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
计算元素位置和偏移量
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo 指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll 是否把 滚动条计算在内,默认TRUE
options.padding 是否把padding计算在内,默认false
options.margin 是否把margin计算在内,默认true
options.border 是否把边框计算在内,默认true
下面代码可以获得浏览器滚动条的宽度,
/*! * 获取浏览器竖向滚动条宽度 * 首先创建一个用户不可见、无滚动条的DIV,获取DIV宽度后, * 再将DIV的Y轴滚动条设置为永远可见,再获取此时的DIV宽度 * 删除DIV后返回前后宽度的差值 * * @return Integer 竖向滚动条宽度 */ function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement("DIV"); oDiv.style.cssText = "position:absolute; top:-1000px; 100px; height:100px; overflow:hidden;"; noScroll = document.body.appendChild(oDiv).clientWidth; oDiv.style.overflowY = "scroll"; scroll = oDiv.clientWidth; document.body.removeChild(oDiv); return noScroll-scroll; }