JS中位置與大小的獲取方法

更新時間：2016年11月22日 08:01:46 投稿：jingxian

下面小編就為大家?guī)硪黄狫S中位置與大小的獲取方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

scrollHeight,clientHeight,offsetHeight的區(qū)別

說明：

scrollHeight：DOM元素的實際內(nèi)容的高度，不包border的高度，會隨DOM元素中內(nèi)容的增加(超過可視區(qū)后)而變大。

clientHeight：DOM元素內(nèi)容可視區(qū)的高度，不包含滾動條和邊框的高度。

offsetHeight：DOM元素整體的高度，包括滾動條和邊框。

當(dāng)滾動條不出現(xiàn)的時候

這時候DOM元素中沒有內(nèi)容或者內(nèi)容不超過可視區(qū)
scrollWidth=clientWidth，兩者皆為可視區(qū)的寬度。
scrollHeight=clientHeight,兩者皆為可視區(qū)的高度。
offsetWidth、offsetHeight為DOM元素的整體寬度和高度。

當(dāng)滾動條出現(xiàn)的時候

這時候DOM元素中沒有內(nèi)容或者內(nèi)容不超過可視區(qū)
scrollWidth>clientWidth
scrollHeight>clientHeight
scrollWidth和scrollHeight分別是實際內(nèi)容的寬度和高度
clientWidth和clientHeight分別是內(nèi)容可視區(qū)的寬度和高度
offsetWidth、offsetHeight為DOM元素的整體寬度和高度。

Demo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>正確理解和運用與尺寸大小相關(guān)的DOM屬性</title>
    <style type="text/css">
    html,body {margin: 0;}
    body {padding: 100px;}
  #box {
    overflow: scroll;
    width: 400px;
    height: 300px;
    padding: 20px;
    border: 10px solid #000;
    margin: 0 auto;
    box-sizing: content-box;
    /*
    box-sizing:content-box表示元素的寬度與高度不包括內(nèi)邊距與邊框的寬度和高度
    box-sizing:border-box表示元素的寬度與高度包括內(nèi)邊距與邊框的寬度和高度
     */
  }
  #box2 {
    border: 1px solid #000;

  }
    </style>
  </head>
  <body>
  <div id="box">
    <div id="box2">谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果谷歌瀏覽器測試結(jié)果</div>
  </div>
  <script type="text/javascript">
  //offsetWidth ，offsetHeight對應(yīng)的是盒模型的寬度和高度
  //scrollWidth，與scrollHeight對應(yīng)的是滾動區(qū)域的寬度和高度，但是不包含滾動條的寬度！滾動區(qū)域由padding和content組成。
  //clientWidth，clientHeight對應(yīng)的是盒模型除去邊框后的那部分區(qū)域的寬度和高度，不包含滾動條的寬度
    var boxE=document.getElementById("box");
    var box=document.getElementById("box2");
    //對于scrollWidth沒有發(fā)生橫向的溢出，同時由于overflow: scroll的原因，scrollWidth 跟clientWidth相同，但是沒有包含滾動條的寬度
    console.log('scrollWidth:' + boxE.scrollWidth);//423
    console.log('scrollHeight:' + boxE.scrollHeight);//672

    //clientWidth與clientHeight分別等于offsetWidth與offsetHeight減掉相應(yīng)邊框（上下共20px，左右共20px）和滾動條寬度后的值（chrome下滾動條寬度為17px）；
    console.log('clientWidth:' + boxE.clientWidth);//423=460-20-17
    console.log('clientHeight:' + boxE.clientHeight);//323=360-20-17

    //offsetWidth與offsetHeight與chrome審查元素看到的尺寸完全一致
    console.log('offsetWidth :' + boxE.offsetWidth);//460=width+padding+border
    console.log('offsetHeight:' + boxE.offsetHeight);//360=height+padding+border
  </script>
  </body>
</html>

利用JS獲取DOM元素的大小

獲取html根元素：document.documentElement
獲取body元素：document.body

獲取頁面可視區(qū)的寬度和高度，不包括滾動條
IE、FF、chrome中采用：
使用document.documentElement.clientWidth和document.documentElement.clientHeight
注意：ie6標(biāo)準(zhǔn)模式下，上述方式可以

在混雜模式下：
ie6使用document.body.clientWidth和document.body.clientHeight
注意： window.innerWidth/Height是包括滾動條的寬度和高度的。這也與document.documentElement.clientWidth/Height的區(qū)別所在。
所以在使用的時候注意兼容寫法：

Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>頁面視口寬高</title>
</head>
<body>
  <script type="text/javascript">
  //標(biāo)準(zhǔn)模式
  var w=document.documentElement.clientWidth;
  var h=document.documentElement.clientHeight;
  console.log('w寬：'+w+'---'+'h高：'+h);
  //混雜模式
  var width=document.body.clientWidth;
  var height=document.body.clientHeight;
  //兼容寫法
  var ww=document.documentElement.clientWidth||document.body.clientWidth;
  var hh=document.documentElement.clientHeight||document.body.clientHeight;
  console.log('ww寬：'+ww+'---'+'hh高：'+hh);
  </script>
</body>
</html>

獲取一個普通html元素的大小

docE.offsetWidth;
docE.offsetHeight;

獲取滾動條滾動高度（兼容性處理）

var oTop=document.documentElement.scrollTop||document.body.scrollTop;

offsetWidth與offsetHeight

這兩個屬性表示元素的可視區(qū)的寬度和高度，這個值包括元素的邊框(border)，水平padding，垂直滾動條寬度或者高度，元素本身寬度或者高度等。

offsetWidth與offsetHeight這兩個屬性的值只與該元素有關(guān)，與周圍元素（父級和子級元素?zé)o關(guān)）。
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

offsetLeft與offsetTop

offsetLeft與offsetTop這兩個屬性值與offsetParent有關(guān)。

offsetParent屬性返回一個對象的引用，這個對象是距離調(diào)用offsetParent的元素最近的（在包含層次中最靠近的），并且是已進行過CSS定位的容器元素。如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素(即body元素)的引用。

兩條規(guī)則：