快捷導(dǎo)航

JavaScript DOM元素尺寸和位置

更新時(shí)間：2015年04月13日 14:36:43 投稿：mdxy-dxy

這篇文章主要介紹了JavaScript DOM元素尺寸和位置,需要的朋友可以參考下

一獲取元素的CSS大小

1.通過(guò)style內(nèi)聯(lián)獲取元素的大小

     var box = document.getElementById('box');    // 獲得元素;

     box.style.width;                             // 200px;

     box.style.height;                            // 200px; 

// PS:style獲取只能取到行內(nèi)style屬性的CSS樣式中的寬和高,如果有,則獲取;如果沒(méi)有則返回空;

2.通過(guò)計(jì)算獲取元素的大小

復(fù)制代碼代碼如下:

     var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;

     style.width;                                // 200px;

// PS:通過(guò)計(jì)算獲取元素的大小,無(wú)關(guān)是行內(nèi)/內(nèi)聯(lián)或鏈接,它返回經(jīng)過(guò)計(jì)算后的結(jié)果;
// 如果本身設(shè)置大小,它會(huì)返回元素的大小;如果本身沒(méi)有設(shè)置,非IE會(huì)返回默認(rèn)的大小,IE會(huì)返回auto;

3.通過(guò)CSSStyleSheet對(duì)象中的cssRules(或rules)屬性獲取元素的大小;

復(fù)制代碼代碼如下:

     var sheet = document.styleSheets[0];            // 獲取link或style;

     var rule = (sheet.cssRules || sheet.rules)[0];  // 獲取第一條規(guī)則;

     rule.style.width;                               // 200px;

PS:cssRules只能獲取到內(nèi)聯(lián)和鏈接樣式的寬和高,不能獲取到行內(nèi)和計(jì)算后的樣式;

總結(jié):以上三種CSS獲取元素大小的方法,只能獲取元素的CSS大小,卻無(wú)法獲取元素本身實(shí)際的大小;比如加上內(nèi)邊距/滾動(dòng)條/邊框之類(lèi)的;

二獲取元素實(shí)際大小

1.clientWidth和clientHeight

這組屬性可以獲取元素可視區(qū)的大小,包含元素內(nèi)容及內(nèi)邊距所占據(jù)的空間大小;
    box.clientWidth;                                // 200;
     PS:返回了元素大小,但沒(méi)有單位,默認(rèn)單位是px;
     PS:對(duì)于元素的實(shí)際大小,clientWidth和clientHeight理解如下:
     1.元素增加邊框,無(wú)變化,200;
     2.元素增加外邊框,無(wú)變化,200;
     3.增加滾動(dòng)條,最終值=原本大小-滾動(dòng)條大小;184;
     4.增加內(nèi)邊距,最終值=原本大小+內(nèi)邊距大小;220;
PS:如果沒(méi)有設(shè)置任何CSS的width和height,那么非IE會(huì)算上滾動(dòng)條和內(nèi)邊距的計(jì)算后的大小;而IE則返回0;

2.scrollWidth和scrollHeight

這組屬性可以獲取沒(méi)有滾動(dòng)條的情況下,元素內(nèi)容的總高度;
box.scrollWidth;
// PS:返回了元素大小,默認(rèn)單位是px;如果沒(méi)有設(shè)置任何CSS的width和height,它會(huì)得到計(jì)算后的寬度和高度;

3.offsetWidth和offsetHeight

這組屬性可以返回元素實(shí)際大小,包含邊框/內(nèi)邊距和滾動(dòng)條;
    box.offsetWidth;                                 200
     PS:返回了元素大小,默認(rèn)單位是px;如果沒(méi)有設(shè)置任何CSS的width和height,它會(huì)得到計(jì)算后的寬度和高度;
     PS:對(duì)于元素的實(shí)際大小,理解如下:
     1.增加邊框,最終值=原本大小+邊框大小;220;
     2.增加內(nèi)邊距,最終值=原本大小+內(nèi)邊距大小;220;
     3.增加外邊據(jù),無(wú)變化;
     4.增加滾動(dòng)條,無(wú)變化,不會(huì)減小;

PS:對(duì)于元素大小的獲取,一般是塊級(jí)(block)元素并且已設(shè)置了CSS大小的元素較為方便;

三獲取元素周邊大小

1.clientLeft和clientTop
// 這組屬性可以獲取元素設(shè)置了左邊框和上邊框的大小;
box.clientLeft; // 獲取左邊框的寬度;

2.offsetLeft和offsetTop(偏移量)

// 這組屬性可以獲取當(dāng)前元素邊框相對(duì)于父元素邊框的位置;
  box.offsetLeft;                  // 50;
  // PS:獲取元素當(dāng)前相對(duì)于父元素的位置,最好將它設(shè)置為定位position:absolute;
  // PS:加上邊框和內(nèi)邊距不會(huì)影響它的位置,但加上外邊據(jù)會(huì)累加;

  box.offsetParent;                 // 得到父元素;
  // PS:offsetParent中,如果本身父元素是<body>,非IE返回body對(duì)象,IE返回html對(duì)象;
  // 如果兩個(gè)元素嵌套,如果上級(jí)父元素沒(méi)有使用定位position:absolute,那么offsetParent將返回body或html對(duì)象;

// 如果說(shuō)在很多層次里,外層已經(jīng)定位,獲取任意一個(gè)元素距離頁(yè)面上的位置,可以不停的向上回溯獲取累加來(lái)實(shí)現(xiàn);
  box.offsetTop+box.offsetParent.offsetTop;     // 只有兩層的情況下;
  // 如果多層的話,就必須使用循環(huán)或遞歸;
  function offsetLeft(element){
    var left = element.offsetLeft;        // 得到第一層距離;
    var parent = element.offsetParent;      // 得到第一個(gè)父元素;
    while(parent !== null){            // 判斷如果還有上一層父元素;
      left += parent.offsetLeft;        // 將得到的距離累加;
      parent = parent.offsetParent;       // 將父元素也回溯;
    }                       // 然后循環(huán);
    return left;                 // 得到最終距離;
  }

3.scrollTop和scrollLeft

// 這組屬性可以獲取被滾動(dòng)條隱藏的區(qū)域大小,也可設(shè)置定位到該區(qū)域;
  box.scrollTop;                  // 獲取滾動(dòng)內(nèi)容上方的位置;

// 設(shè)置滾動(dòng)條滾動(dòng)到最初始的位置;
  function scrollStart(element){
    if(element.scrollTop != 0){
      element.scrollTop = 0;
    }
  }

四 getBoundingClientRect()方法

// 這個(gè)方法返回一個(gè)矩形對(duì)象,包含四個(gè)屬性:left/top/right和bottom;
// 分別表示元素各邊與頁(yè)面上邊和左邊的距離;
  var box = document.getElementById('box');
  alert(box.getBoundingClientRect().top);    // 元素上邊距離頁(yè)面上邊的距離;
  alert(box.getBoundingClientRect().right);   // 元素右邊距離頁(yè)面左邊的距離;
  alert(box.getBoundingClientRect().bottom);   // 元素下邊距離頁(yè)面上邊的距離;
  alert(box.getBoundingClientRect().left);    // 元素左邊距離頁(yè)面左邊的距離;
  // PS:IE/Firefox/Opera/Chrome/Safari都支持;
  // 但在IE中,默認(rèn)坐標(biāo)從(2,2)開(kāi)始計(jì)算,導(dǎo)致最終距離比其他瀏覽器多出兩個(gè)像素;
  document.documentElement.clientTop;      // 非IE為0,IE為2;
  document.documentElement.clientLeft;      // 非IE為0,IE為2;
// 兼容getBoundingClientRect()
  function getRect(element){
    var rect = element.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left = document.documentElement.clientLeft;
    return {
      top:rect.top-top,           // 元素上邊距-頁(yè)面的上邊距(0-0或2-2);
      bottom:rect.bottom-top,
      left:rect.left-left,         // 元素左邊距-頁(yè)面的左邊距(0-0或2-2);
      right:rect.right-left
    }
  };

五小結(jié)

1.偏移量(offset dimension):包括元素在屏幕上占用的所有可見(jiàn)的空間;
元素的可見(jiàn)大小由其高度和寬度決定,包括內(nèi)邊距/滾動(dòng)條和邊框;
2.客戶區(qū)大小(client dimension):指的是元素內(nèi)容及其內(nèi)邊距所占據(jù)的空間大小;
3.滾動(dòng)大小(scroll dimension):包含滾動(dòng)內(nèi)容的元素的大小;

您可能感興趣的文章: