日期:2014-05-16  浏览次数:20416 次

关于页面中对象位置的常用js方法
关于页面中对象位置的常用js方法

/********************  
* 判断某对象是否在显示区域,若不在,则移动滚动条,让其显示
*******************/ 
function moveToOneMenu(objName)
{	
	var mendingTop=getObjWZ(objName)	//某对象在页面中的位置
	var sh=document.body.scrollTop   //滚动条离页面最上方距离
	var winH=getClientHeight()		//窗口高度
	
	if(mendingTop<=0)
		return;
	
	if(mendingTop+22-winH-sh > 0) //在下方未显
		window.scrollTo(0,mendingTop+22-winH);
	else if(mendingTop<sh) //在上方未显
		window.scrollTo(0,mendingTop);
		
}

/********************  
* 取某对象在页面中的上下位置:距顶部的距离   
*******************/ 
function getObjWZ(objName)
{
	var ob=document.getElementById(objName);
	if(!ob){return null;}
	var mendingOb = ob;
	var mendingTop = mendingOb .offsetTop;
	while( mendingOb != null && mendingOb .offsetParent != null && mendingOb .offsetParent.tagName != "BODY" ){
		mendingTop += mendingOb .offsetParent.offsetTop;
		mendingOb = mendingOb .offsetParent;
	}
	return mendingTop ;
}

/********************  
* 取窗口可视范围的高度   
*******************/ 
function getClientHeight()   
{   
	var clientHeight=0;   
	if(document.body.clientHeight&&document.documentElement.clientHeight)   
	{   
		var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;           
	}   
	else  
	{   
		var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;       
	}   
	return clientHeight;   
}