<JavaScriptの>取得サイズclassパターン

スタイルクラスのサイズを取得します。

offsetHeight

HTMLElement.offsetHeightこれは、素子のピクセルの高さ、マージンとボーダーを含む要素の垂直高さを返し、整数であり、読み取り専用プロパティです。（コンテンツ+パディング+ボーダー）

典型的には、offsetHeight要素は、要素のCSSの高さの尺度である水平フレームのスクロールバー要素、及びパディング要素を含む（それが存在してレンダリングする場合）は含まれていないその他の擬似土類元素後高さ：前または。

代わり合計含有量の高い線形高いCSS要素を含む文書オブジェクトの本体のために。フローティング要素の概要下方に延びる高さは無視されます。

要素（noneに設定され、例えばstyle.display要素または要素の祖先の1つの要素）隠されている場合、それは0を返します

• 文法

  var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;

• 例

  var hei = obox.offsetHeight;//返回一个整数数值

  

  ショー上記画像はscollbarと高offsetHeightウィンドウがなく、高さの値の多くを有することができる転動体と、コンテンツを見ることができるよりも大きいです。原則として、これらの要素は、転動体に含まれています。値scrollTopスプライトが完全に隠された又は部分的に隠されるので、したがって、これらは、転動体ができないことであってもよいです。

offsetWidth

HTMLElement.offsetWidthは、レイアウト要素の幅を返す読み取り専用のプロパティです。（翻訳者注：各ブラウザoffsetWidthが変化してもよい）は、典型的には存在する場合、パディング要素（境界）を含むoffsetWidthフレーム、水平線（パディング）、垂直スクロールバー（スクロールバー）を（測定されますそれ）、および幅（幅）が配置されたCSSです。

コンテンツ+パディング+ボーダー

• 文法

  var offsetWidth =element.offsetWidth;

  このプロパティは、整数として円形（丸い）であろう。あなたは小数（10進数）の値を使用する場合は、使用element.getBoundingClientRect()

• 分類

  1. 何の境界線をスクロールしないなしなしパディング要素の場合

     offsetWidth = clientWidth = style.width

  2. 要素は、パディングを持っている場合は何のスクロール国境はありません

     offsetWidth = style.width + style.padding*2 + border宽度*2

  3. パディング転動体がある場合は、そこに境界線がある、とスクロールが表示されます

     offsetWidth = style.width + style.padding*2 + (border-width)*2
     offsetWidth = clientWidth + 滚轴宽度 + border宽度*2

     同様にoffsetHeight

• 例

  var wid = obox.offsetWidth;//返回一个整数数值

  

clientWidth

clientWeightは読み取り専用のプロパティです。：のサイズ範囲パディング+コンテンツ

インラインCSSスタイル要素なし要素**clientWidth**ゼロの値。**Element.clientWidth**属性は、ピクセル単位で、素子の内部幅を表します。属性にはパディングが含まれるが、垂直スクロールバー（もしあれば）、ボーダーとパディングが含まれていません。

• 文法

  var intElemClientWidth = element.clientWidth;
  //intElemClientWidth 是一个整数，表示元素的 clientWidth。

• 分類

  1. スクロールせずに無パディング要素の場合

     clientWidth = style.width

  2. 何の転動体は、パディングを持っていない場合

     clientWidth = style.width + style.padding*2

  3. ある場合は、パディング転動体と、表示がスクロールさ

     clientWidth = style.width + style.padding*2 - 滚动轴宽度

     同様にclientHeight

• 例

  var cw = obox.clientWidth;//返回一个整数数值

  

clientHeight

clientHeightは、読み取り専用のプロパティです。：のサイズ範囲パディング+コンテンツ

• 文法

  var intElemClientHeight = element.clientHeight;
  //intElemClientHeight 是一个整数，表示元素的 clientHeight。

• 例

  var ch = obox.clientHeight;//返回一个整数数值

  

offsetTop

HTMLElement.offsetTopは読み取り専用そのに対する電流素子返すプロパティoffsetParent要素の上部内側縁からの距離を。

ページまたはブロックに対する相対位置であってオフセット

• 文法

  topPos = element.offsetTop;

• 例

  var d = document.getElementById("div1");
  var topPos = d.offsetTop;
  
  if (topPos > 10) {
    // div1 距离它的 offsetParent 元素的顶部的距离大于 10 px
  }

offsetLeft

HTMLElement.offsetLeft読み取り専用そのに対する電流素子返すプロパティoffsetParent要素の左マージンからの距離を。

ページまたはブロックに対する相対位置であってオフセット

• 文法

  leftPos = element.offsetLeft;

• 例

  var d = document.getElementById("div1");
  var topLeft = d.offsetLeft;
  
  if (topLeft > 10) {
    // div1 距离它的 offsetParent 元素的顶部的距离大于 10 px
  }

プロパティは、缶の上に設定することができないだけでGET

scrollTopスプライト

Element.scrollTop プロパティを取得または垂直画素の転動体の内容を設定することができます。

要素のscrollTop距離（の上部）コンテンツのビューポート可視小節の先頭に要素の値。スクロールバー元素の含有量は、垂直方向に生成されていない場合、それscrollTop 值为0。

• 文法

  // 获得滚动的像素数
  var  intElemScrollTop = someElement.scrollTop;
  
  // 设置滚动的距离
  element.scrollTop = intValue;

• 例

  document.onclick = function(){
      // console.log(obox.scrollTop);
      obox.scrollTop = 666;
  }

  

scrolLeft

Element.scrollLeft プロパティは、読み取りまたは要素の左に距離のスクロールバーの要素を設定することができます。

なお、素子配列方向の含有量は、（IF direction）であるrtl（右から左へ）、次いで右端（コンテンツの先頭）に位置するスクロールバー、および値0 scrollLeft。あなたが右から左にスクロールバーをドラッグすると、この場合には、scrollLeftは（この機能はChromeブラウザに存在しない）0からマイナスになります。

• 文法

  //获取滚动条到元素左边的距离
  var sLeft = element.scrollLeft;
  
  //设置滚动条滚动了多少像素
  element.scrollLeft = 10;

  scrollLeft しかし、任意の整数を指定できます。

  • あなたは（たとえば：要素がオーバーフローしない）要素をスクロールすることができない場合、そのscrollLeft値は0です。
  • 場合はscrollLeft値が0未満である場合、scrollLeft値が0になります。
  • 場合scrollLeft値がコンテンツ要素の最大幅よりも大きい、scrollLeft値、要素の最大幅に設定されます。

• 例

  document.onclick = function(){
      // console.log(obox.scrollLeft);
      obox.scrollLeft = 666;
  }