JSで位置とサイズを取得する方法-jsチュートリアル-php.cn

JSで位置とサイズを取得する方法

高洛峰

リリース： 2016-12-06 10:05:19

オリジナル

1214 人が閲覧しました

scrollHeight、clientHeight、offsetHeight の違い

説明:

scrollHeight: DOM 要素の実際のコンテンツの高さ (境界線の高さを除く) は、DOM 要素のコンテンツが増加するにつれて (境界線の高さを超えた後) 増加します。視覚領域）。

clientHeight: スクロールバーと境界線の高さを除く、DOM 要素コンテンツの表示領域の高さ。

offsetHeight: スクロールバーと境界線を含む DOM 要素全体の高さ。

JSで位置とサイズを取得する方法

スクロールバーが表示されない場合

このとき、DOM要素にコンテンツがないか、コンテンツがビジュアルエリアを超えていない場合
scrollWidth=clientWidth、どちらもビジュアルエリアの幅です。
scrollHeight=clientHeight、両方とも視覚領域の高さです。
offsetWidth と offsetHeight は、DOM 要素の全体の幅と高さです。

スクロールバーが表示されるとき

DOM要素にコンテンツがないか、コンテンツがビジュアルエリアを超えていない場合
scrollWidth>clientWidth
scrollHeight>clientHeight
scrollWidthとscrollHeightはそれぞれ実際のコンテンツの幅と高さです
clientWidth clientHeight と clientHeight はそれぞれ、コンテンツの視覚領域の幅と高さです。
offsetWidth と offsetHeight は DOM 要素全体の幅と高さです。

デモ

<!DOCTYPE html>
<html>
  <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对应的是滚动区域的宽度和高度，但是不包含滚动条的宽度！滚动区域由padding和content组成。
  //clientWidth，clientHeight对应的是盒模型除去边框后的那部分区域的宽度和高度，不包含滚动条的宽度
    var boxE=document.getElementById("box");
    var box=document.getElementById("box2");
    //对于scrollWidth没有发生横向的溢出，同时由于overflow: scroll的原因，scrollWidth 跟clientWidth相同，但是没有包含滚动条的宽度
    console.log(&#39;scrollWidth:&#39; + boxE.scrollWidth);//423
    console.log(&#39;scrollHeight:&#39; + boxE.scrollHeight);//672
 
    //clientWidth与clientHeight分别等于offsetWidth与offsetHeight减掉相应边框（上下共20px，左右共20px）和滚动条宽度后的值（chrome下滚动条宽度为17px）；
    console.log(&#39;clientWidth:&#39; + boxE.clientWidth);//423=460-20-17
    console.log(&#39;clientHeight:&#39; + boxE.clientHeight);//323=360-20-17
 
    //offsetWidth与offsetHeight与chrome审查元素看到的尺寸完全一致
    console.log(&#39;offsetWidth :&#39; + boxE.offsetWidth);//460=width+padding+border
    console.log(&#39;offsetHeight:&#39; + boxE.offsetHeight);//360=height+padding+border
  </script>
  </body>
</html>

ログイン後にコピー

JSを使用してDOM要素のサイズを取得します

HTMLのルート要素を取得します: document.documentElement
ボディ要素を取得します: document.body

の表示領域の幅と高さを取得しますスクロールバーを除くページ
IE、FF および chrome で使用:
document.documentElement.clientWidth および document.documentElement.clientHeight を使用します
注: ie6 標準モードでは、上記のメソッドを使用できます

混合モード:
ie6 document.body.clientWidth と document.body を使用します
注: window.innerWidth/Height にはスクロールバーの幅と高さが含まれます。これも document.documentElement.clientWidth/Height との違いです。
そのため、使用する場合は互換性のある記述に注意してください:

Demo

<!DOCTYPE html>
<html>
<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(&#39;w宽：&#39;+w+&#39;---&#39;+&#39;h高：&#39;+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(&#39;ww宽：&#39;+ww+&#39;---&#39;+&#39;hh高：&#39;+hh);
  </script>
</body>
</html>

ログイン後にコピー

通常のHTML要素のサイズを取得します

docE.offsetWidth;

スクロールバーのスクロール高さを取得します(互換処理)

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

offsetWidth と offsetHeight

これら 2 つのプロパティは、要素の表示領域の幅と高さを表します。この値には、要素の境界線、水平方向のパディング、垂直方向が含まれます。スクロールバーの幅または高さ、要素自体の幅または高さなど。

offsetWidth と offsetHeight の値はこの要素にのみ関連し、周囲の要素 (親要素と子要素) には関係しません。

offsetWidth=(ボーダー幅)*2+(パディング左)+(幅)+(パディング右)

offsetHeight=(ボーダー幅)*2+(パディング上)+(高さ)+(パディング-bottom)

offsetLeftとoffsetTop

offsetLeftとoffsetTopはoffsetParentに関連しています。

offsetParent プロパティは、offsetParent を呼び出す要素に最も近い (包含階層内で最も近い) オブジェクトへの参照を返し、CSS によって配置されたコンテナ要素です。このコンテナ要素が CSS で配置されていない場合、offsetParent 属性の値はルート要素 (つまり、body 要素) への参照になります。

2 つのルール:

現在の要素の親要素に CSS 配置がない場合 (位置が絶対または相対)、offsetParent は body です。

現在の要素の親要素に CSS 位置指定がある場合 (位置が絶対または相対)、offsetParent は最も近い親要素を取得します。

offsetLeft: offsetParent の左上頂点を基準としたオブジェクト要素の境界の左上頂点の水平オフセット。

offsetTop: の左上頂点を基準としたオブジェクト要素の境界の左上頂点の垂直オフセット。 offsetParent;

offsetLeft=(offsetParent のパディング左)+(中央要素の offsetWidth)+(現在の要素のマージン左)

offsetTop=(offsetParent のパディング上)+(中央要素の offsetHeight)+(現在の要素のマージン上)

offsetParent が body:

IE8/9/10 および Chrome の場合、状況は特殊です:

offsetLeft = (body の margin-left)+(body の border-width)+(body の padding-left )+(margin-left現在の要素の)。

FireFoxの場合:

offsetLeft = (ボディのマージン左)+(ボディのパディング左)+(現在の要素のマージン左)