JavaScriptでのオフセット、クライアント、スクロールの使い方を詳しく解説

offsetTop は、上部または上部コントロールからの要素の位置、整数、単位ピクセルを指します。
offsetLeft は、左または上のコントロールからの要素の位置、整数、単位ピクセルを指します。
offsetWidth は、要素コントロール自体の幅、整数、単位ピクセルを指します。
offsetHeight は、要素コントロール自体の高さ (整数、単位ピクセル) を指します。
Webページの表示領域の幅: document.body.clientWidth
Webページの表示領域の高さ: document.body.clientHeight
Webページの表示領域の幅ページ: document.body.offsetWidth (端の幅を含む)
Webページの表示領域の高さ: document.body.offsetHeight (側線の幅を含む)
全文の幅Web ページの高さ: document.body.scrollWidth
Web ページの全文の高さ: document.body.scrollHeight
スクロールされた Web ページの高さ: document.body.scrollTop
スクロールされた Web ページの左側: document .body .scrollLeft
Web ページ本体の上部: window.screenTop
Web ページ本体の左側: window.screenLeft
画面解像度の高さ: window.screen.height
画面解像度の幅: window .screen.width
利用可能な画面ジョブ領域の高さ: window.screen.availHeight
画面利用可能な作業領域の幅: window.screen.availWidth
document.bodyのclientHeight、offsetHeight、scrollHeightについて4つのブラウザで説明します。
4 つのブラウザは、IE (Internet Explorer)、NS (Netscape)、Opera、FF (FireFox) です。
clientHeight
4 つのブラウザーはいずれも clientHeight の解釈に異論はありません。これはコンテンツの表示領域の高さ、つまりコンテンツが表示される領域の高さであると考えています。通常、ページ ブラウザは最後のツールバーの下にあり、ステータス バーの上にあるこの領域に移動します。これはページのコンテンツとは関係ありません。
offsetHeight
IE と Opera は、offsetHeight = clientHeight + スクロール バー + 境界線であると信じています。
NS と FF は、offsetHeight が Web ページ コンテンツの実際の高さであると考えており、clientHeight よりも小さくなる可能性があります。
scrollHeight
IE と Opera は、scrollHeight を Web ページ コンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。
NS と FF は、scrollHeight が Web ページのコンテンツの高さであると考えますが、最小値は clientHeight です。
はじめに:
1. offsetLeft
obj が HTML コントロールであると仮定します。
obj.offsetTop は、上からの obj の位置、または上位コントロール、整数、単位ピクセルを参照します。
obj.offsetLeft は、左または上のコントロールからの obj の位置、整数、単位ピクセルを参照します。
obj.offsetWidth は、obj コントロール自体の幅 (整数、単位ピクセル) を指します。
obj.offsetHeight は、obj コントロール自体の高さ (整数、単位ピクセル) を指します。
先ほどの「上または上」と「左または上」のコントロールについて説明しましょう。
例:

<p id="tool"> 
<input type="button" value="提交"> 
<input type="button" value="重置"> 
</p>

「送信」ボタンの offsetTop は、「送信」ボタンと「ツール」レイヤーの上境界線との間の距離を指します。最も近いのは「ツール」レイヤーの上境界線であるためです。
「リセット」ボタンの offsetTop は、「リセット」ボタンと「ツール」レイヤーの上境界線との間の距離を指します。これは、それに最も近いのが「ツール」レイヤーの上境界線であるためです。
「送信」ボタンの offsetLeft は、「送信」ボタンと「ツール」レイヤーの左境界線の間の距離を指します。これは、その左に最も近いものが「ツール」レイヤーの左境界線であるためです。
「リセット」ボタンの offsetLeft は、「リセット」ボタンと「送信」ボタンの右枠の間の距離を指します。これは、その左に最も近いのが「送信」ボタンの右枠であるためです。
上記のプロパティは FireFox でも有効です。
さらに: ここで話しているのは、document.body ではなく、HTML コントロールの属性値を指します。 document.body の値は、ブラウザーによって解釈が異なります (実際、ほとんどの環境は、ドキュメントの解釈が異なることが原因です)。 .body 、オフセットの解釈の違いによるものではありません）、違いを確認するにはここをクリックしてください。
タイトル: offsetTop と style.top の違い
予備知識: offsetTop、offsetLeft、offsetWidth、offsetHeight
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、offsetHeight、scrollHeight
ここでは、4 つのブラウザによる document.body の解釈について説明します。 ここでは、HTML コントロールの場合、違いがあります。ここで確認してください。
4 つのブラウザは、IE (Internet Explorer)、NS (Netscape)、Opera、FF (FireFox) です。
2. clientHeight
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 の説明は上記と同じで、高さを幅に置き換えるだけです。
しかし
FF は異なる DOCTYPE で clientHeight の解釈が異なり、xhtml 1 trasional では上記のように説明されていません。他のブラウザではこの問題は発生しません。
タイトル:scrollTop、scrollLeft、scrollWidth、scrollHeight
3、scrollLeft
scrollTop は「スクロール」の高さの値です。例:

scrollTop が p に設定されている場合、これらは内容がすべて表示されない場合があります。

p.scrollTop = 10;
外側の要素pにscrollTopが設定されているので、内側の要素は上にスクロールします。
scrollLeftも同様です。
offsetHeight がそれ自体の要素の幅であることはすでにわかっています。
そして、scrollHeight は、内部要素の非表示部分を含む、内部要素の絶対幅です。
上記では、pのscrollHeightは300、pのoffsetHeightは100です。
scrollWidth も同様です。
IE と FireFox はこれを完全にサポートしていますが、Netscape と Opera は (document.body を除く)scrollTop とscrollLeft をサポートしていません。
タイトル: offsetTop、offsetLeft、offsetWidth、offsetHeight
4、clientLeft
返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离，可以理解为边框的长度 
一直以来对offsetLeft，offsetTop，scrollLeft，scrollTop这几个方法很迷糊，花了一天的时间好好的学习了一下．得出了以下的结果： 
1.offsetTop : 
当前对象到其上级层顶部的距离. 
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 
2.offsetLeft : 
当前对象到其上级层左边的距离. 
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性. 
3.offsetWidth : 
当前对象的宽度. 
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值 
4.offsetHeight : 
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值 
5.offsetParent : 
当前对象的上级层对象. 
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题. 
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置． 
得到绝对位置脚本代码 

function GetPosition(obj) 
{ 
var left = 0; 
var top = 0; 

while(obj != document.body) 
{ 
left = obj.offsetLeft; 
top = obj.offsetTop; 

obj = obj.offsetParent; 
} 

alert("Left Is : " + left + "\r\n" + "Top Is : " + top); 
}

6.scrollLeft : 
对象的最左边到对象在当前窗口显示的范围内的左边的距离． 
即是在出现了横向滚动条的情况下，滚动条拉动的距离． 
7.scrollTop 
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离． 
即是在出现了纵向滚动条的情况下，滚动条拉动的距离． 
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，点击这里查看。 
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。 
clientHeight 
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。 
offsetHeight 
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。 
scrollHeight 
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。 
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。 
简单地说 
clientHeight 就是透过浏览器看内容的这个区域高度。 
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。 
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加

更多JavaScriptでのオフセット、クライアント、スクロールの使い方を詳しく解説相关文章请关注PHP中文网！