JavaScript DOM元素尺寸與位置_基礎知識-js教程-PHP中文網

一取得元素的CSS大小

1.透過style內聯取得元素的大小

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

     box.style.width;                         地
     box.style.height;                            ///200px; 

// PS:style取得只能取到行內style屬性的CSS樣式中的寬和高,如果有,則取得;如果沒有則回傳空;

2.透過計算取得元素的大小

複製程式碼程式碼如下:

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

     style.width;                          

 // PS:透過計算取得元素的大小,無關是行內/內聯或連結,它傳回經過計算後的結果;

// 如果本身設定大小,它會回傳元素的大小;如果本身沒有設定,非IE會回傳預設的大小,IE會回傳auto;

3.透過CSSStyleSheet物件中的cssRules(或rules)屬性取得元素的大小;

複製程式碼程式碼如下:

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

var rule = (sheet.cssRules || sheet.rules)[0]; // 取得第一個規則;
rule.style.width;

PS:cssRules只能取得到內聯和連結樣式的寬和高,不能取得到行內和計算後的樣式;

總結:以上三種CSS取得元素大小的方法,只能取得元素的CSS大小,卻無法取得元素本身實際的大小;例如加上內邊距/捲軸之類的;

二取得元素實際大小

1.clientWidth和clientHeight

這組屬性可以取得元素視覺區的大小,包含元素內容及內邊距所佔據的空間大小;
    box.clientWidth;                                PS:回傳了元素大小,但沒有單位,預設單位是px;
     PS:對於元素的實際大小,clientWidth和clientHeight理解如下:
     1.元素增加邊框,無變化,200;
     2.元素增加外邊框,無變化,200;
     3.增加捲軸,最終值=原本大小-捲軸大小;184;
     4.增加內邊距,最終值=原本大小內邊距大小;220;
PS:如果沒有設定任何CSS的width和height,那麼非IE會算上滾動條和內邊距的計算後的大小;而IE則回傳0;

2.scrollWidth和scrollHeight

這組屬性可以取得沒有捲軸的情況下,元素內容的總高度;

box.scrollWidth;
// PS:回傳了元素大小,預設單位是px;如果沒有設定任何CSS的width和height,它會得到計算後的寬度和高度;

3.offsetWidth和offsetHeight

這組屬性可以傳回元素實際大小,包含邊框/內邊距和捲軸;

    box.offsetWidth;                                PS:回傳了元素大小,預設單位是px;如果沒有設定任何CSS的width和height,它會得到計算後的寬度和高度;
     PS:對於元素的實際大小,理解如下:
     1.增加邊框,最終值=原本大小邊框大小;220;
     2.增加內邊距,最終值=原本大小內邊距大小;220;
     3.增加外邊據,無變化;
     4.增加捲軸,無變化,不會減少;

PS:對於元素大小的取得,一般是區塊級(block)元素且已設定了CSS大小的元素較為方便;

三取得元素週邊大小

1.clientLeft和clientTop

// 這組屬性可以取得元素設定了左邊框和上邊框的大小;
box.clientLeft;
2.offsetLeft和offsetTop(偏移量)

// 这组属性可以获取当前元素边框相对于父元素边框的位置;
  box.offsetLeft;                  // 50;
  // PS:获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;
  // PS:加上边框和内边距不会影响它的位置,但加上外边据会累加;

  box.offsetParent;                 // 得到父元素;
  // PS:offsetParent中,如果本身父元素是<body>,非IE返回body对象,IE返回html对象;
  // 如果两个元素嵌套,如果上级父元素没有使用定位position:absolute,那么offsetParent将返回body或html对象;

// 如果说在很多层次里,外层已经定位,获取任意一个元素距离页面上的位置,可以不停的向上回溯获取累加来实现;
  box.offsetTop+box.offsetParent.offsetTop;     // 只有两层的情况下;
  // 如果多层的话,就必须使用循环或递归;
  function offsetLeft(element){
    var left = element.offsetLeft;        // 得到第一层距离;
    var parent = element.offsetParent;      // 得到第一个父元素;
    while(parent !== null){            // 判断如果还有上一层父元素;
      left += parent.offsetLeft;        // 将得到的距离累加;
      parent = parent.offsetParent;       // 将父元素也回溯;
    }                       // 然后循环;
    return left;                 // 得到最终距离;
  }

登入後複製

3.scrollTop和scrollLeft

// 这组属性可以获取被滚动条隐藏的区域大小,也可设置定位到该区域;
  box.scrollTop;                  // 获取滚动内容上方的位置;

// 设置滚动条滚动到最初始的位置;
  function scrollStart(element){
    if(element.scrollTop != 0){
      element.scrollTop = 0;
    }
  }

登入後複製

四 getBoundingClientRect()方法

// 这个方法返回一个矩形对象,包含四个属性:left/top/right和bottom;
// 分别表示元素各边与页面上边和左边的距离;
  var box = document.getElementById('box');
  alert(box.getBoundingClientRect().top);    // 元素上边距离页面上边的距离;
  alert(box.getBoundingClientRect().right);   // 元素右边距离页面左边的距离;
  alert(box.getBoundingClientRect().bottom);   // 元素下边距离页面上边的距离;
  alert(box.getBoundingClientRect().left);    // 元素左边距离页面左边的距离;
  // PS:IE/Firefox/Opera/Chrome/Safari都支持;
  // 但在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素;
  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,           // 元素上边距-页面的上边距(0-0或2-2);
      bottom:rect.bottom-top,
      left:rect.left-left,         // 元素左边距-页面的左边距(0-0或2-2);
      right:rect.right-left
    }
  };

登入後複製

五小結

1.偏移量(offset dimension):包括元素在螢幕上所佔用的所有可見的空間; 元素的可見大小由其高度和寬度決定,包括內邊距/捲軸和邊框;

2.客戶區大小(client dimension):指的是元素內容及其內邊距所佔據的空間大小;

3.滾動大小(scroll dimension):包含滾動內容的元素的大小;