1. 程式人生 > >js-獲取DOM尺寸、位置

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:
  • <!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(),是在之前的基本資料上做累加。