js-獲取DOM尺寸、位置
阿新 • • 發佈：2018-11-26
獲取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:
- <!DOCTYPE html>限定了瀏覽器的渲染模式為標準模式，如果在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(),是在之前的基本資料上做累加。