DOM 要素のサイズとオフセットのプロパティ

1.クライアントシリーズ

• clientWidth:ボックスの表示領域の幅。
  ボックスモデルがコンテンツボックスの場合、 clientWidth = width + padding - 垂直スクロールバーの幅
  ボックスモデルがボーダーボックスの場合、 clientWidth = width - border - 垂直スクロールバーの幅
• clientHeight:ボックスの表示領域の高さ。
  ボックスモデルが content-box の場合、 clientHeight= height + padding - 水平スクロールバーの高さ
  ボックスモデルが border-box の場合、 clientHeight= height - border - 水平スクロールバーの高さ
• clientTop:ボックスの上端の高さ。
• clientLeft:ボックスの左境界線の幅。

2、オフセットシリーズ

• offsetWidth:ボックスレイアウトの幅。
  ボックスモデルがコンテンツボックスの場合、 offsetWidth = width + padding + border
  ボックスモデルがボーダーボックスの場合、 offsetWidth = width
• offsetHeight:ボックスレイアウトの高さ。
  ボックスモデルがコンテンツボックスの場合、 offsetHeight = 高さ + パディング +
  ボーダー ボックスモデルがボーダーボックスの場合、 offsetHeight = 高さ
• offsetParent:ボックスの最も近い位置(相対、絶対、固定、スティッキー) の親要素
• offsetLeft:ボックスの左境界の外側から offsetParent の左境界の内側までの距離
• offsetTop:ボックスの上端の外側から offsetParent の上端の内側までの距離

三、巻物シリーズ

• scrollWidth:要素の全体の幅を返します。これには、オーバーフローにより Web ページに表示できない非表示の部分を含み、マージンと境界線を除きます。
• scrollHeight:オーバーフローにより Web ページに表示できない非表示の部分を含む、余白と境界線を除いた要素全体の高さを返します。
• scrollLeft:水平スクロール バーの右側へのスクロール距離。これは、パディングが占める位置の外側から境界線の内側までの距離でもあります。スクロール バーが右端にスライドすると、scrollLeft =scrollWidth - clientWidth となり、スクロールがない場合、scrollLeft は 0 になります。
• scrollTop:水平スクロールバーの下方向のスクロール距離。