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

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

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

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

說明：

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

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

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

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

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

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

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

Demo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>正確理解和運(yùn)用與尺寸大小相關(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">谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果谷歌瀏覽器測(cè)試結(jié)果</div>
  </div>
  <script type="text/javascript">
  //offsetWidth ，offsetHeight對(duì)應(yīng)的是盒模型的寬度和高度
  //scrollWidth，與scrollHeight對(duì)應(yīng)的是滾動(dòng)區(qū)域的寬度和高度，但是不包含滾動(dòng)條的寬度！滾動(dòng)區(qū)域由padding和content組成。
  //clientWidth，clientHeight對(duì)應(yīng)的是盒模型除去邊框后的那部分區(qū)域的寬度和高度，不包含滾動(dòng)條的寬度
    var boxE=document.getElementById("box");
    var box=document.getElementById("box2");
    //對(duì)于scrollWidth沒有發(fā)生橫向的溢出，同時(shí)由于overflow: scroll的原因，scrollWidth 跟clientWidth相同，但是沒有包含滾動(dòng)條的寬度
    console.log('scrollWidth:' + boxE.scrollWidth);//423
    console.log('scrollHeight:' + boxE.scrollHeight);//672

    //clientWidth與clientHeight分別等于offsetWidth與offsetHeight減掉相應(yīng)邊框（上下共20px，左右共20px）和滾動(dòng)條寬度后的值（chrome下滾動(dòng)條寬度為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ū)的寬度和高度，不包括滾動(dòng)條
IE、FF、chrome中采用：
使用document.documentElement.clientWidth和document.documentElement.clientHeight
注意：ie6標(biāo)準(zhǔn)模式下，上述方式可以

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

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>

獲取一個(gè)普通html元素的大小

docE.offsetWidth;
docE.offsetHeight;

獲取滾動(dòng)條滾動(dòng)高度（兼容性處理）

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

offsetWidth與offsetHeight

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

offsetWidth與offsetHeight這兩個(gè)屬性的值只與該元素有關(guān)，與周圍元素（父級(jí)和子級(jí)元素?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這兩個(gè)屬性值與offsetParent有關(guān)。

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

兩條規(guī)則：

如果當(dāng)前元素的父級(jí)元素沒有進(jìn)行CSS定位（position為absolute或relative），offsetParent為body。

如果當(dāng)前元素的父級(jí)元素中有CSS定位（position為absolute或relative），offsetParent取最近的那個(gè)父級(jí)元素。

offsetLeft：對(duì)象元素邊界的左上角頂點(diǎn)相對(duì)于offsetParent的左上角頂點(diǎn)的水平偏移量；

offsetTop：對(duì)象元素邊界的左上角頂點(diǎn)相對(duì)于offsetParent的左上角頂點(diǎn)的垂直偏移量；

offsetLeft=(offsetParent的padding-left)+(中間元素的offsetWidth)+(當(dāng)前元素的margin-left)

offsetTop=(offsetParent的padding-top)+(中間元素的offsetHeight)+(當(dāng)前元素的margin-top)

當(dāng)offsetParent為body時(shí)情況比較特殊:

在IE8/9/10及Chrome中：
offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(當(dāng)前元素的margin-left)。

在FireFox中：
offsetLeft = (body的margin-left)+(body的padding-left)+(當(dāng)前元素的margin-left)

以上就是小編為大家?guī)淼腏S中位置與大小的獲取方法全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: