jsにおけるtop、clientTop、scrollTop、offsetTopの違い詳細テキスト説明 version_javascriptスキル。

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth   (包括边线的宽);
网页可见区域高： document.body.offsetHeight  (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

屏幕可用工作区宽度：window.screen.availWidth;

 

 

1、offsetLeft

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如：

「送信」ボタンの offsetTop は、「送信」ボタンと「ツール」レイヤーの上の境界線との間の距離を指します。これは、それに最も近いものが上部の境界線であるためです。 「ツール」レイヤーの境界線。
「リセット」ボタンの offsetTop は、「リセット」ボタンと「ツール」レイヤーの上境界線との間の距離を指します。これは、それに最も近いのが「ツール」レイヤーの上境界線であるためです。ツール」レイヤー。

「送信」ボタンの offsetLeft は、「送信」ボタンと「ツール」レイヤーの左境界線の間の距離を指します。これは、その左に最も近いものが左端であるためです。 「ツール」レイヤーの境界線。
「リセット」ボタンの offsetLeft は、「送信」ボタンの右端からの「リセット」ボタンの距離を指します。これは、その左に最も近いのがボタンの右端であるためです。 「送信」ボタン。

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

さらに、ここで話していることは、document.body ではなく、HTML コントロールの属性値を指します。 document.body の値は、ブラウザーによって解釈が異なります。 most ほとんどの状況は、offset の解釈の違いではなく、document.body の解釈の違いによって引き起こされます)。相違点を表示するには、ここをクリックしてください。
タイトル: offsetTop と style.top の違い

予備知識: offsetTop、offsetLeft、offsetWidth、offsetHeight

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

1 offsetTop は数値を返し、style.top は数値に加えて単位 px も含む文字列を返します。

二、offsetTop 只读，而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
标题：clientHeight、offsetHeight和scrollHeight

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，点击这里查看。

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

2. 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 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同， xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。
标题：scrollTop、scrollLeft、scrollWidth、scrollHeight

3、scrollLeft
scrollTop 是“卷”起来的高度值，示例：

如果为 p 设置了 scrollTop，这些内容可能不会完全显示。

var p = document.getElementById("p");
p.scrollTop = 10;


外側の要素pにscrollTopが設定されているため、内側の要素が上に上がりますロール。

scrollLeft も同様です 。

offsetHeight がそれ自身の要素 の幅であることはすでにわかっています。

そして、scrollHeight は、内部要素の非表示部分を含む、内部要素の絶対幅です。

上記では、p のscrollHeight は 300、p の offsetHeight は 100 です。

scrollWidth も同様です。

IE と FireFox は完全にサポートしていますが、Netscape と Opera は、scrollTop とscrollLeft をサポートしていません (document.body を除く)。
发表时间：2007-10-15 20:20:16
标题：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 :
の親レイヤー オブジェクト。 current object.
注: オブジェクトが DIV に含まれている場合、その DIV はオブジェクトの上位レベルとは見なされません (つまり、オブジェクトの上位レベルは DIV をスキップします)。
この属性を使用すると、さまざまなサイズのページ内の現在のオブジェクトの絶対位置を取得できます。
絶対位置スクリプト コードを取得

コードをコピー コード以下のように:

function GetPosition(obj)
{
var left = 0;
while(obj != document.body)
{
left = obj.offsetLeft;
top = obj.offsetParent;
}
alert("Left は : " left "rn" " : " トップ);
}


6.scrollLeft:
The distance from the far left side of the object to the left side of the object within the range displayed in the current window.
That is, when a horizontal scroll bar appears, the distance the scroll bar is pulled.

7.scrollTop
The distance from the top of the object to the top edge of the object within the range displayed in the current window.
That is, when a vertical scroll bar appears, the distance the scroll bar is pulled.


Here we talk about the interpretation of clientHeight, offsetHeight and scrollHeight of document.body by four browsers. Here we are talking about document.body. If it is an HTML control, it is different. Click here Check.

The four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox).

clientHeight
No one has any objection to clientHeight. They all think it is the height of the visible area of ​​the content, which means the height of the area where the content can be seen in the page browser. It is usually the last tool. The area below the bar to above the status bar has nothing to do with the page content.

offsetHeight
IE and Opera consider offsetHeight = clientHeight scroll bar border.
NS and FF consider offsetHeight to be the actual height of the web page content, which can be smaller than clientHeight.

scrollHeight
IE and Opera consider scrollHeight to be the actual height of the web page content, which can be smaller than clientHeight.
NS and FF consider scrollHeight to be the height of web page content, but the minimum value is clientHeight.

Simply put
clientHeight is the height of the area where the content is viewed through the browser.
NS and FF believe that offsetHeight and scrollHeight are both web page content heights, but when the web page content height is less than or equal to clientHeight, the value of scrollHeight is clientHeight, and offsetHeight can be less than clientHeight.
IE and Opera believe that offsetHeight is the visible area clientHeight scroll bar plus border. scrollHeight is the actual height of the web page content.

Similarly
The explanations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.

Explanation
The above is based on DTD HTML 4.01 Transitional. If it is DTD XHTML 1.0 Transitional, the meaning will be different. In XHTML, these three values ​​are the same value, and they all represent the actual height of the content. Most new versions of browsers support enabling different interpreters based on the DOCTYPE specified on the page. Download or browse test files.