js-獲取DOM尺寸、位置

獲取DOM尺寸、位置

查看滾動條的滾動位置

• window.pageXOffset / window.pageYOffset(IE8及其以下版本不支持)
• document.body/documentElement.scrollLeft/scrollTop
  • 兼容性比較混亂，使用時通常取兩個屬性值相加，因為不可能存在兩個同時有值。
• 封裝兼容性方法getScrollOffset():

function getScrollOffset(){
		if(window.pageXOffset){
			return{
				x:window.pageXOffset,
				y:window.pageYOffset
			}
		}else{
			return{
				x:document.documentElement.scrollLeft,
				y:document.documentElement.scrollTop
			}
		}
	}

查看可視化窗口的尺寸

• window.innerWidth/innerHeight
  • IE8及其以下版本不兼容
• document.documentElement.clientWidth/clientHeight
  • 標准模式下，任意瀏覽器兼容
• document.body.clientWidth/clientHeight
  • 適合怪異(混雜)模式下瀏覽器
• 封裝兼容性方法，getViewportOffset:

function getViewportOffset(){
		if(window.innerHeight){
			return{
				width:window.innerWidth,
				height:window.innerHeight
			}
		}else{
			if(document.compatMode == 1){
				return{
					width:document.documentElement.clientWidth,
					height:document.documentElement.clientHeght
				}
			}else{
				return{
					width:document.body.clientWidth,
					height:document.body.clientHeght
				}
			}
		}
	}

PS:

• 限定了瀏覽器的渲染模式為標准模式，如果在Html文件刪去這一句代碼，則采用怪異(混雜)模式。
• 標准模式下，網頁按照現行的瀏覽器版本渲染；
• 怪異模式下，網頁會選擇瀏覽器版本向后兼容的方式渲染。

查看元素的幾何尺寸

• domEle.getBoundingClientRect();
  • 兼容性很好。
  • 返回的是一個對象，里面包括該元素的bottom,left,top right（bottom,left表示元素左下角坐標X,y值）；width,height（在老版本IE瀏覽器中不兼容）。
  • 返回的結果並不是實時的。

查看元素的尺寸

• domEle.offsetWidth, domELe.offHeight

查看元素的位置

• domEle.offsetLeft,domEle.offTop
  • 對於無定位父級的元素，返回相對於文檔的位置；對於有定位父級的元素，返回相對於最近的有定位父級元素的位置。
• domEle.offsetPerent
  • 返回最近的有定位的父級元素，如果沒有就返回body;body.offsetParent為null.

讓滾動條滾動

• window上有三個方法：scroll(),scrollTo(); scrollBy()
• 三個方法的功能類似，都是在括號里面傳入x,y的值。
• 區別：前兩個都是滾動到x,y坐標；scrollBy(),是在之前的基本數據上做累加。