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 の値は、ブラウザーによって解釈が異なります (実際、ほとんどの環境は、ドキュメントの解釈が異なることが原因です)。 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 については誰もが異論はありません。これはコンテンツの表示領域の高さ、つまりページ ブラウザーでコンテンツが表示される領域の高さであると考えられています。最後のツールバーとステータスバーの上。これはページのコンテンツとは関係ありません。
オフセット高さ
IE と Opera は、offsetHeight = clientHeight + スクロール バー + 境界線を信じます。
NS と FF は、offsetHeight を Web ページ コンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。
スクロール高さ
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 では意味が異なります。XHTML では、これら 3 つの値はすべて同じ値であり、コンテンツの実際の高さを示します。ブラウザのほとんどの新しいバージョンは、ページで指定された DOCTYPE に基づいてさまざまなインタープリタの有効化をサポートしています。
scrollTop は「ロールされた」高さの値です。例:
次のようにコードをコピーします。
<div id="p">
<div id="t">pにscrollTopを設定した場合、これらの内容が完全に表示されない場合があります。 </div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
外側の要素pにscrollTopが設定されているので、内側の要素は上にスクロールし、巻き上げられた部分がscrollTopになります。
scrollLeft も同様です。
offsetHeight がそれ自体の要素の幅であり、scrollHeight が内部要素の絶対幅 (内部要素の非表示部分を含む) であることはすでにわかっています。上記では、p のscrollHeight は 300、p の offsetHeight は 100 です。
スクロール幅も同様です。
IE と FireFox はこれを完全にサポートしていますが、Netscape 8 と Opera 7.6 は、scrollTop とscrollLeft をサポートしていません (document.body.scrollTop と document.body.scrollLeft を除く)。
1.クライアントの高さ、クライアントの幅:
これら 2 つのプロパティは、要素のコンテンツのピクセルの高さと幅を大まかに示します。理論上、これらの測定値にはスタイル シートを介して追加された要素は考慮されていません。
要素内のマージン、境界線など。
2.クライアント左、クライアント上:
これら 2 つは、要素の周囲の境界線の太さを返します。境界線を指定しない場合、または要素を配置しない場合、その値は 0 です。
3.左にスクロール、上にスクロール:
要素がスクロール可能な場合、これら 2 つのプロパティを使用して、要素が水平方向と垂直方向にどれだけスクロールしたかを取得できます。単位はピクセルです。
スクロールできない要素の場合、これらの値は常に 0 です。
4.スクロール高さ、スクロール幅:
ページ上に表示されるオブジェクトの数に関係なく、全体が取得されます。
5.スタイル.左:
配置された要素の、それを含む四角形の左端からのオフセット
6.style.pixelLeft:
配置された要素の左境界オフセットの整数のピクセル値を返します。属性の非ピクセル値は単位を含む文字列を返すため、たとえば 30px の値を個別に処理するには、この属性を使用します。
7.スタイル:posLetf:
対応するスタイルシート要素で指定された単位に関係なく、位置要素の左境界オフセットの数値を返します。これは、属性の非位置値が単位を含む文字列 (たとえば、1.2em) を返すためです。
top、pixelTop、posTop などのいくつかの例で十分です。
LEFT: 左から右に移動した位置、つまりペンダントと画面の左端の間の距離です。
clientLeft は、オブジェクトの offsetLeft プロパティ値と現在のウィンドウの左側の実際の値の間の距離を返します。
offsetLeft は、親オブジェクトのレイアウトまたは座標を基準としたオブジェクトの左の値を返します。親オブジェクトの左上隅を座標の原点とし、X 軸と Y 軸の正の方向の x 座標を取得します。右と下へ。
xelLeft は、ウィンドウの左側を基準としたオブジェクトの位置を設定または返します。
scrollWidth は、エッジの幅を除いたオブジェクトの実際のコンテンツの幅であり、オブジェクト内のコンテンツの量に応じて変化します (コンテンツが多すぎると、オブジェクトの実際の幅が変化する可能性があります)。
clientWidth は、スクロール バーやその他の端を除いたオブジェクトの表示幅であり、ウィンドウの表示サイズによって変化します。
offsetWidth は、スクロール バーやその他の端を含むオブジェクトの表示幅であり、ウィンドウの表示サイズによって変化します。
IE6.0、FF1.06以降：
clientWidth = 幅 + パディング
clientHeight = 高さ + パディング
offsetWidth = 幅 + パディング + 境界線
offsetHeight = 高さ + パディング + 境界線
IE5.0/5.5：
clientWidth = 幅 - 境界線
clientHeight = 高さの境界線
offsetWidth = 幅
オフセット高さ = 高さ
(言及する必要があります: CSS の margin 属性は clientWidth、offsetWidth、clientHeight、および offsetHeight とは何の関係もありません)
offsetwidth: 親要素に対する要素のオフセット幅です。ボーダー+パディング+幅と等しい
clientwidth: 要素の表示幅です。パディング+幅に等しい
scrollwidth: スクロール部分を含む要素の幅です。
offsetLeft: 独自の offsetParent 要素を基準とした Html 要素の位置
scrollLeft: 現在の水平スクロール タスクの座標値を返し、設定します。
次のようにコードをコピーします。
<input type="button" value="クリック" onclick="move()">
<div id="d" style="background-color:#ff9966;position:absolute;left:170px;top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<スクリプト言語="javascript">
関数move()
{
var d=document.getElementById("d")
a=評価(20)
d.scrollLeft+=a
}
</script>
Web ページとして保存し、実行してボタンをクリックすると、スクロール バーが移動します
div をクリックし、まず a を基準とした b の位置をポップアップし、次にウィンドウを基準とした a の位置をポップアップします。