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

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

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

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

說明：

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

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

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

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

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

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

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

Demo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>正確理解和運用與尺寸大小相關的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表示元素的寬度與高度不包括內邊距與邊框的寬度和高度
    box-sizing:border-box表示元素的寬度與高度包括內邊距與邊框的寬度和高度
     */
  }
  #box2 {
    border: 1px solid #000;

  }
    </style>
  </head>
  <body>
  <div id="box">
    <div id="box2">谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果谷歌瀏覽器測試結果</div>
  </div>
  <script type="text/javascript">
  //offsetWidth ，offsetHeight對應的是盒模型的寬度和高度
  //scrollWidth，與scrollHeight對應的是滾動區(qū)域的寬度和高度，但是不包含滾動條的寬度！滾動區(qū)域由padding和content組成。
  //clientWidth，clientHeight對應的是盒模型除去邊框后的那部分區(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減掉相應邊框（上下共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標準模式下，上述方式可以

在混雜模式下：
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">
  //標準模式
  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這兩個屬性的值只與該元素有關，與周圍元素（父級和子級元素無關）。
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

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

offsetLeft與offsetTop

offsetLeft與offsetTop這兩個屬性值與offsetParent有關。

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

兩條規(guī)則：