MW211 EXIT

devlog
JavaScript/幅(2)
2014年02月09日
次に、「height」、「clientHeight」、「scrollHeight」、「offsetHeight」。
┌──────┬───────────────────────────────┐
│      height│=height                                                      │
│clientHeight│=height+padding                                             │
│scrollHeight│=height+padding                               +見えない領域│
│offsetHeight│=height+padding+scrollbar+border                          │
└──────┴───────────────────────────────┘
  ・「clientHeight」と「scrollHeight」は基本的に同じだが、
    スクロールバーが発生して見えない領域がある場合、
    「scrollHeight」はそれも含むという違いがある
  ・昔のIEでは「scrollHeight」の仕様が違う
    スクロールしていない場合は、中身のサイズのみ
    (つまり短いスクロールバーがあるであろうサイズのみ)を返していた
  ・スクロールバーが表示されると、
    paddingの内側が短く(実際に短くなるのはheight)なるが、
    「offsetHeight」以外はその煽りを受けて短くなってしまう
  ・「scrollHeight+scrollbar+border」という全部盛りは用意されていない
    「border」は「.css('border-top-width')」と「.css('border-bottom-width')」で
    算出できるが、「scrollbar」は「約16px」とかが使われたりする
    「=offsetHeight-clientHeight+scrollHeight」でできそうな感じがするが

「width」の場合も同様。
┌──────┬───────────────────────────────┐
│      width │=width                                                       │
│clientWidth │=width+padding                                              │
│scrollWidth │=width+padding                                +見えない領域│
│offsetWidth │=width+padding+scrollbar+border                           │
└──────┴───────────────────────────────┘

但し、情報が錯綜しているので、本当かどうかは今後検証していく。
ブラウザによる違いとかもありそう。
分類:JavaScript