获取浏览器尺寸常用的几个属性

浏览器视口尺寸、文档尺寸和滚动坐标是三个常用的值。为了获取这三个值,现在可以搜索到的代码,最为著名和常用的,是那个40行左右的getWindowInfo函数。从这个函数一开篇里的pageXOffset就可知道,这个函数相当有年头了。其实我在2005年前后就曾经用过它。

基于有限开发的原则,我决定抛弃ns浏览器,使用document.body/document.documentElement来获取各项参数,即clientWidth/Height、offsetWidth/Height、scrollWidth/Height。这里需要注意的是ie和ff对offsetWidth/Height解释的不同。仅就offsetHeight来讲,在ie下,该值等于clientHeight + 4;在ff下,该值等于scrollHeight。其他的,client相关尺寸为视口大小,scroll相关尺寸为文档大小。

另外相关的两个对象是window和html节点。

window.innerWidth/Height是ff下的特有属性,其值与clientWidth/Height相同。

html.offsetWidth/Height的值与offsetWidth/Height的值相同,即ie下为clientHeight + 4,在ff下为scrollWidth/Height。

获取滚动坐标的办法比较简单:html.scrollLeft/Top。

下面是muse库在加载时初始化的一段ui库的代码:

(function(){	//init browser function
	//ui
	var _obj_ = document.documentElement || document.body, _html_ = muse.selector.html();
	muse.ui = {
		clientWidth : function(){ return _obj_.clientWidth; },
		clientHeight : function(){ return  _obj_.clientHeight; },
		//clientWidth : typeof window.innerWidth == 'number' ? function(){ return window.innerWidth; } : function(){ return _obj_.clientWidth; },
		//clientHeight : typeof window.innerHeight == 'number' ? function(){ return window.innerHeight; } : function(){ return  _obj_.clientHeight; },
		contentWidth : function(){ return _obj_.scrollWidth; },
		contentHeight : function(){ return _obj_.scrollHeight; },
		scrollLeft : function(){ return _html_.scrollLeft; },
		scrollTop : function(){ return _html_.scrollTop; }
	};
})();
posted @ 2010-04-07 08:49  MKing's Kindom  阅读(157)  评论(0编辑  收藏  举报