摘要：如何獲取元素的真實(shí)尺寸呢通過下，介紹。這個(gè)函數(shù)主要提供給我們?cè)睾蛯挾仍趦?nèi)的一系列值仍然不要妄想通過獲得，加上原先的，就可以減去和的值獲得元素的真實(shí)尺寸。

關(guān)于元素的尺寸和位置，這原本是 CSS 干的事，但更多的時(shí)候需要用 JavaScript 來獲取這些參數(shù)，比如一個(gè)很好的例子 js 實(shí)現(xiàn)的圖片瀑布流。

在介紹 JS 中的例子之前，先來說明一下 css 中的元素尺寸。

先開個(gè)頭吧，一個(gè)元素所占據(jù)的物理尺寸包括以下幾個(gè)部分，由內(nèi)到外分別是內(nèi)容，padding，border，margin，這些值加到一起才算是一個(gè)元素真實(shí)尺寸。這里面并沒有把滾動(dòng)條的寬度算上，因?yàn)闈L動(dòng)條時(shí)占用 padding 的寬度的，如果 padding 寬度小于滾動(dòng)條，那么滾動(dòng)條多出來的部分將占用內(nèi)容的寬度。padding與滾動(dòng)條關(guān)系。

比如下面的這個(gè)例子：

// html


// css style
.test{
    width:100px;
    height: 100px;
    padding:10px;
    border:2px solid black;
    margin: 5px;
}

上圖是 chrome 調(diào)試下的 styles，所以 .test 的實(shí)際寬度應(yīng)該是 100px + 20px + 4px + 10px = 134px，這里把 margin 也算進(jìn)去，高度的計(jì)算同理。知道這一點(diǎn)很重要，當(dāng)我們需要精確設(shè)定元素寬度的時(shí)候，就不會(huì)因?yàn)槌叽邕^大而把元素?cái)D到下一行。

不過，這是入門級(jí)的 CSS。除此之外，還需要知道一個(gè)非常重要的 CSS 樣式，即 box-sizing，可參考 MDN 上的介紹。

/* 關(guān)鍵字值 */
box-sizing: content-box;
box-sizing: border-box;

box-sizing 有兩個(gè)關(guān)鍵字（據(jù)說還有一個(gè) padding-box，反正我在 chrome 上測試不成功），content-box 是默認(rèn)值，此時(shí) width 只表示內(nèi)容 content，border-box 表示元素的 width 等于 content + padding + border 三者之和。border-box 非常有用，尤其當(dāng)我們?cè)谑褂?100% 來規(guī)定寬高的時(shí)候，如果元素存在 border 或 padding，將直接導(dǎo)致元素的實(shí)際大小大于 100%，估計(jì)還有人記得 calc 帶來的痛苦。

修改上面的例子：

.test{
  width:100px;
  height: 100px;
  padding:10px;
  border:2px solid black;
  margin: 5px;
  box-sizing: border-box;
}

76 + 20 + 4 = 100px，此時(shí)的 width 表示三者之和，而內(nèi)容的寬度只有 76px 了。

千萬不要嘗試用 element.style.width 或 element.style.height 來獲得元素的高度和寬度，它們的默認(rèn)值都是 0，除非你在 html 元素里面設(shè)置，否則 js 是無法獲得 css 的樣式的，必須要用其他的方法。比如下面這段代碼 element.style.width 的值才是 100px：

JS 中 element 對(duì)象提供 offsetHeight, scrollHeight, clientHeight(每個(gè)都對(duì)應(yīng) width)，其中：

offsetHeight 可以用來計(jì)算元素的物理空間，此空間包括內(nèi)容，padding 和 border（還包括滾動(dòng)條的寬度，但大多時(shí)候滾動(dòng)條的寬度是計(jì)算到 padding 和內(nèi)容中的）。

var test = document.getElementsByClassName("test")[0];
test.offsetHeight // 100

scrollHeight 用來計(jì)算可滾動(dòng)容器的大小，包括不可見的部分，比如一個(gè) 300*300 的容器放入一個(gè) 600*600 的圖片，此時(shí) scrollHeight 為 600，當(dāng)然，scrollHeight 的值需要加上 padding 的值。

clientHeight 表示可視區(qū)域，包括內(nèi)容和 padding ，如果有滾動(dòng)條，還需要減去滾動(dòng)條的寬度。

舉個(gè)例子，還是之前那個(gè) test，加入 test2：

    



//css
.test{
  overflow: auto; //新增
}
.test2{
    width: 150px;
    height: 150px;
    background-color: gray;
}

來看一看 test 的輸出值是多少：

var test = document.getElementsByClassName("test")[0];
test.offsetHeight // 100
test.scrollHeight // 170
test.clientHeight // 79

此時(shí)滾動(dòng)條的寬度是 17px，根據(jù)前面的介紹，滾動(dòng)條時(shí)占用 padding 和 content 寬度的，而 17px 大于 padding 的 10px，故還有 7px 會(huì)占據(jù) content。

分析一下，offsetHeight 的值是 100，padding 10px，滾動(dòng)條雖然存在，但是占了 padding 和內(nèi)容的空間，offsetHeight 的值是 4+20+76 = 100px。scrollHeight 的值是可滾動(dòng)的范圍加上padding 值，同樣不包括滾動(dòng)條，即 150+20 = 170px。clientHeight 的值是可見區(qū)域，但是不包括滾動(dòng)條的值（滾動(dòng)條。。。），所以20+76-17 = 79px。

其實(shí)也不是非常復(fù)雜。這個(gè)時(shí)候可以得出滾動(dòng)條寬度的計(jì)算：offsetHeight 減去 border 和 clientHeight 的和就是滾動(dòng)條寬度。

剛說了半天，還是無法獲得元素內(nèi)容的尺寸，最接近內(nèi)容寬度的是 clientHeight，在沒有滾動(dòng)條的情況下，減去 padding 值就是內(nèi)容的尺寸。

如何獲取元素的真實(shí)尺寸呢？

通過 getComputedStyle （IE 下 currentStyle），MDN 介紹。

getComputedStyle 這個(gè)函數(shù)主要提供給我們?cè)?border 和 padding 寬度在內(nèi)的一系列值（仍然不要妄想通過 element.style.border-width 獲得），加上原先的 offsetHeight，就可以減去 border 和 padding 的值獲得元素的真實(shí)尺寸。

// 考慮 IE 的兼容性
function getStyle(el) { 
  if(window.getComputedStyle) { 
    return window.getComputedStyle(el, null); 
  }else{ 
    return el.currentStyle; 
  } 
} 
function getWH(el, name) { 
  var val = name === "width" ? el.offsetWidth : el.offsetHeight, 
  which = name === "width" ? ["Left", "Right"] : ["Top", "Bottom"]; 
  // display is none 
  if(val === 0) { 
    return 0; 
  } 
  var style = getStyle(el);
  // 左右或上下兩邊的都減去
  for(var i = 0, a; a = which[i++];) { 
    val -= parseFloat( style["border" + a + "Width"]) || 0; 
    val -= parseFloat( style["padding" + a ] ) || 0; 
  } 
  return val; 
}
// 測試，正確
getWH(test, "width"); // 76

在這里先隆重推出一個(gè)重量級(jí)嘉賓函數(shù)，即 getBoundingClientRect，貼上 MDN 鏈接。

element.getBoundingClientRect() 會(huì)返回一個(gè)數(shù)組，比如：

test.getBoundingClientRect();
  bottom:108
  height:100
  left:13
  right:113
  top:8
  width:100

其中，width 和 height 跟 element.offset 的值是一致的，left bottom 等值則表示距離瀏覽器窗口的距離，如果要獲得元素的位置，只需要得到 left 和 top 的值即可，

var X= test.getBoundingClientRect().left;
var Y =test.getBoundingClientRect().top;
//再加上滾動(dòng)距離，就可以得到絕對(duì)位置
var X= test.getBoundingClientRect().left+document.body.scrollLeft;
var Y =test.getBoundingClientRect().top+document.body.scrollTop;

此方法之外，還有其他方法。比如每個(gè)元素都有 offsetTop 和 offsetLeft 屬性，表示距離父容器左、上角的邊距，offsetParent 表示父容器，先得到距離父容器的距離，依次累加，得到絕對(duì)位置。

function getPosition(element, name){
  name = name.toLowerCase().replace("left", "Left").replace("top", "Top");
  var offset = "offset" + name;
  var actualLeft = element[offset];
  var current = element.offsetParent;
  while (current !== null){
    actualLeft += current[offset];
    current = current.offsetParent;
  }
  return actualLeft;
}
getPosition(test,"left") // 13
getPosition(test,"top") // 8

結(jié)果和 getBoundingClientRect() 值一樣，有時(shí)候需要考慮是相對(duì)于屏幕的位置還是絕對(duì)位置，然后再做進(jìn)一步的計(jì)算。

感覺最近的文章越來越水，主要是因?yàn)樽罱荚谧セA(chǔ)，學(xué)習(xí) nodejs 和 ES6 的基本語法，沒時(shí)間去看一下比較流行的框架。白天又特別忙，學(xué)校里又一大堆事情，各種煩躁。共勉！

用Javascript獲取頁面元素的位置
關(guān)于元素的尺寸(dimensions) 說明
height、clientHeight、scrollHeight、offsetHeight區(qū)別

歡迎來我博客交流。