jsの高低差と頂点の比較_基礎知識

js で clientHeight(clientTop)、offsetHeight(offsetTop)、scrollHeight(scrollTop) を見るたびに混乱してしまい、それらの違いがわかりません。しかし、これらを一度や二度遭遇する価値はありません。どちらを使用するかを決定するには、毎回違いを確認する必要があります。

この記事は主に Chrome に基づいています。さまざまなブラウザ間でいくつかの違いがある可能性がありますが、その多くは私が遭遇したことがないため、今後同様の互換性の問題が発生したときに記録します。ここで、今回は、今後の閲覧を容易にするために、Chrome ブラウザーのさまざまなプロパティの違いを記録します

clientHeight、offsetHeight、scrollHeight の違い

ClientHeight は基本的にさまざまなブラウザで同じであり、コンテンツの表示領域の高さ、つまりページ ブラウザ内でコンテンツが表示される領域の高さを意味します。ただし、スクロール バーとマージンは含まれません。つまり、実際の clientHeight = 現在のオブジェクトの表示領域の高さのパディング値 (下の図に示すように) clientHeight = オブジェクトの表示領域の高さ (300)より低いパディング値 (20) = 320

さまざまなブラウザで実用的な Javascript ソリューション:

var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;

OffsetHeight = 現在のオブジェクトのスクロール バーの高さ、ボーダー値、パディング値。上の図の現在のオブジェクトの高さは、ビジュアル領域の高さと同じであるため、offsetHeight = 300 padding(20px) border(10px) = 330

ScrollHeight は Web ページのコンテンツの実際の高さです。最小値は clientHeight です。ただし、次のコードに示すように、親 div の高さと同じであると仮定します。は300px、子divの高さは500pxです。このとき、親divの構造図は以下のようになります。

親 div のスクロール高さは、scrollHeight = 500px パディング値である必要があります

このときスクロールバーが生成されるため、親divの表示領域の高さは283、現在のオブジェクトの高さは親divの高さは300なので、

clientHeight = 283px パディング値 (20px) = 303px

offsetHeight = 親 div の高さ (300px) パディング値 (20px) ボーダー (10px) = 330px

<div id="parent" style="padding:10px;border:5px red solid;height:300px;width:200px;overflow:auto">
  <div style="height:500px;width:400px"></div>
</div>

clientTop、offsetTop、scrollTop の違い

clientTop を理解するには、clientHeight を参照します。clientHeight の計算方法は、現在のビジュアル領域の高さにパディング値を加えたものであり、現在のビジュアル領域から前の要素までの距離として理解できます。

上の図に示すように、clientTop は 5px です。ほとんどの場合、clientTop はこの境界値です。

offsetTop は現在のオブジェクトから body 要素までの距離です。計算方法は比較的複雑です。まず、現在のオブジェクトは境界線内の領域を参照するため、offsetTop の計算はマージンから始まります。計算式は次のとおりです: offsetTop = 現在のオブジェクトの margin-top、現在のオブジェクトのすべての上位要素の margin-top、現在のオブジェクトのすべての上位要素の border-top です。 offsetTop は直接割り当てることはできず、この計算方法を通じてのみ取得できます。

scrollTop は、現在のウィンドウの表示範囲内の現在のオブジェクトの上端から現在のオブジェクトの上端までの距離です。つまり、垂直スクロール バーが表示されるときに、スクロール バーが引っ張られる距離です。

上記は、js のさまざまな身長とトップの違いを比較したものです。皆さんの学習に役立つことを願っています。