offsetLeft、Left、clientLeft の違いの簡単な分析_基礎知識

obj は HTML コントロールであると仮定します

obj.offsetTop は、レイアウトまたは offsetParent 属性で指定された親座標を基準とした、計算された obj の上部位置 (整数、単位ピクセル) を指します。

obj.offsetLeft は、レイアウトまたは offsetParent 属性で指定された親座標を基準とした、計算された obj の左位置 (整数、単位ピクセル) を指します。

obj.offsetWidth は、オーバーフローにより表示されない部分を除いた、obj コントロール自体の絶対幅、つまり実際の幅、整数、単位ピクセルを指します。

obj.offsetHeight は、オーバーフローにより表示されない部分を除いた、obj コントロール自体の絶対的な高さ、つまり実際に占める高さの整数、単位ピクセルを指します。

先ほど説明した offsetParent について説明します。

offsetParent オブジェクトの offsetTop プロパティと offsetLeft プロパティを定義するコンテナ オブジェクトへの参照を取得します。 offsetTop と offsetParent は非常に複雑で、ブラウザーごとに解釈が異なり、また解釈も異なります。そのため、通常は、ブラウザー内のコントロールの絶対位置がこの 2 つを通じて取得できることを理解するだけで十分です。

上記のプロパティは FireFox でも有効です。

さらに: ここで話していることは、document.body ではなく、HTML コントロールの属性値を指します。 document.body の値は、ブラウザーによって解釈が異なります (実際、ほとんどの環境では解釈が異なります)。これは、offset の解釈の違いではなく、.body の解釈の違いによって引き起こされます)

offsetTop は先頭要素または外部要素から HTML 要素の位置を取得でき、style.top も使用できることがわかっています。この 2 つの違いは次のとおりです。

1. offsetTop は数値を返しますが、style.top は数値に加えて単位 px も返します。

2. offsetTop は読み取り専用ですが、style.top は読み取り/書き込み可能です。

3. HTML 要素にトップ スタイルが指定されていない場合、style.top は空の文字列を返します。

offsetLeft と style.left、offsetWidth と style.width、offsetHeight と style.height にも同じことが当てはまります。

clientHeight
clientHeight について異論のある人は誰もいません。これはコンテンツの表示領域の高さ、つまり、コンテンツが表示される領域の高さであると考えています。コンテンツはページ ブラウザで見ることができます。通常、最後のツールバーの下からステータス バーの上までの領域は、ページのコンテンツとは関係ありません。

offsetHeight
IE と Opera は、offsetHeight = clientHeight スクロール バーの境界線を認識します。
NS と FF は、offsetHeight を Web ページ コンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。

scrollHeight
IE と Opera は、scrollHeight を Web ページ コンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。
NS と FF は、scrollHeight を Web ページ コンテンツの高さとみなしますが、最小値は clientHeight です。

簡単に言えば、
clientHeight は、ブラウザを通じてコン​​テンツが表示される領域の高さです。
NS と FF は、offsetHeight とscrollHeight が両方とも Web ページ コンテンツの高さであると信じていますが、Web ページ コンテンツの高さが clientHeight 以下の場合、scrollHeight の値は clientHeight であり、offsetHeight は clientHeight より小さくなる可能性があります。
IE と Opera は、offsetHeight が表示領域 clientHeight スクロール バーと境界線であると信じています。 scrollHeight は、Web ページ コンテンツの実際の高さです。

同様に
clientWidth、offsetWidth、scrollWidth の説明は上記と同じで、高さを幅に置き換えるだけです。

説明
上記は DTD HTML 4.01 Transitional に基づいていますが、DTD XHTML 1.0 Transitional の場合、これら 3 つの値は同じ値になります。そしてそれらはすべて実際のコンテンツの高さを表します。ほとんどの新しいバージョンのブラウザーは、ページ

で指定された DOCTYPE に基づいてさまざまなインタープリターの有効化をサポートしています。

scrollTop は「スクロールされた」高さの値です。例:

コードをコピー コードは次のとおりです:

pにscrollTopを設定した場合、これらの内容が完全に表示されない場合があります。

外側の要素pにscrollTopが設定されているので、内側の要素が巻き上げられ、巻き上げられた部分がscrollTopになります。

scrollLeft も同様です。

offsetHeight はそれ自体の要素の幅であり、scrollHeight は内部要素の非表示部分を含む内部要素の絶対幅であることはすでにわかっています。上記では、p のscrollHeight は 300、p の offsetHeight は 100 です。

scrollWidth も同様です。

IE と FireFox は完全にサポートしていますが、Netscape 8 と Opera 7.6 は、scrollTop、scrollLeft をサポートしていません (document.body.scrollTop、document.body.scrollLeft を除く)。

1.clientHeight, clientWidth:
これら 2 つのプロパティは、要素のコンテンツのピクセルの高さと幅を大まかに表示します。理論的には、これらの測定値は、スタイルシート 要素内の余白、境界線など。

2.clientLeft, clientTop:
これら 2 つは、境界線を指定しない場合、または要素を配置しない場合、その値は 0 です。

3.scrollLeft,scrollTop:
要素がスクロール可能な場合、これら 2 つのプロパティを使用して、要素が水平方向と垂直方向にどれだけスクロールしたかを取得できます。単位はピクセルです。 スクロール不可能な要素の場合、これらの値は常に 0 です。

4.

scrollHeight,scrollWidth:
ページ上に表示されるオブジェクトの数に関係なく、全体が取得されます。

5.style.left:
それを含む四角形の左端からの位置決めされた要素のオフセット

6.style.pixelLeft:
属性の非ピクセル値は単位を含む文字列を返すため、配置された要素の左境界オフセットの整数ピクセル値を返します。たとえば、30px。ピクセル単位の値を個別に処理するには、この属性を使用します。

7.style:posLetf:
非位置値であるため、対応するスタイルシート要素で指定された単位に関係なく、位置決めされた要素の左境界オフセットの数値を返します。属性の値は、単位文字列を含む値を返します。たとえば、1.2em

top、pixelTop、posTop は、単なる類似点です。

LEFT: 左から右に移動した位置、つまりウィジェットと画面の左端の間の距離です。

clientLeft オブジェクトの offsetLeft 属性値とウィジェット間の距離を返します。現在のウィンドウの左側の実数値

offsetLeft 親オブジェクトのレイアウトまたは座標を基準としたオブジェクトの左の値を返します。親オブジェクトの左上隅を原点とします。座標、および X 軸と Y 軸の右および下方向の正の方向の x 座標

pixelLeft ウィンドウの左側を基準としたオブジェクトの位置を設定または返します

scrollWidth は、エッジの幅を除いたオブジェクトの実際のコンテンツの幅であり、オブジェクト内のコンテンツの量に応じて変化します (コンテンツが多すぎるとオブジェクトの幅が変化する可能性があります) 実際の幅)。

clientWidth は、スクロール バーやその他の端を除いたオブジェクトの表示幅であり、ウィンドウの表示サイズによって変化します。

offsetWidth は、スクロール バーやその他の端を含むオブジェクトの表示幅であり、ウィンドウの表示サイズによって変化します。

IE6.0、FF1.06:
clientWidth = 幅パディングclientHeight = 高さパディング
offsetWidth = 幅パディング境界線
offsetHeight = 高さパディング境界線
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(注意が必要: CSS の margin 属性はclientWidth 、 offsetWidth 、 clientHeight 、 offsetHeight は無関係です)

offsetwidth: 親要素に対する要素のオフセット幅です。ボーダーパディング幅と等しい

clientwidth: 要素の表示幅です。パディング幅
スクロール幅と等しい: 要素の幅であり、スクロール部分が含まれます。
offsetLeft: 独自の offsetParent 要素に対する Html 要素の位置
scrollLeft: 現在の水平スクロール タスクの座標値を返し、設定します

Copy code コードは次のとおりです。

onclick="alert( 'offsetLeft:' this.offsetLeft)">

🎜>


Web ページとして保存し、実行し、ボタン、スクロール バーをクリックします。
div をクリックすると、b の相対位置が最初に表示されます。 a の位置に、ウィンドウに対する a の相対位置が表示されます

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。