javascript_javascript 스킬 중 오프셋, 클라이언트, 스크롤 사용법에 대한 자세한 설명

 
offsetTop 指元素距离上方或上层控件的位置，整型，单位像素。
offsetLeft 指元素距离左方或上层控件的位置，整型，单位像素。
offsetWidth 指元素控件自身的宽度，整型，单位像素。
offsetHeight 指元素控件自身的高度，整型，单位像素。
网页可见区域宽：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
这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。
这四种浏览器分别为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

介绍：
1、offsetLeft
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如：

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。
以上属性在 FireFox 中也有效。
另 外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body，document.body 的值在不同浏览器中有不同解释（实际上大多数环境是由于对 document.body 解释不同造成的，并不是由于对 offset 解释不同造成的），点击这里查看不同点。

标题：offsetTop 与 style.top 的区别
预备知识：offsetTop、offsetLeft、offsetWidth、offsetHeight
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、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
大家对 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 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同， xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。
标题：scrollTop、scrollLeft、scrollWidth、scrollHeight

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

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

{

var left = 0;
var top = 0

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

obj = obj.offsetParent;
}

alert("Left Is: " left "rn" "Top Is: " top);
}




6.scrollLeft

:
객체의 가장 왼쪽에서 객체의 왼쪽까지의 거리 현재 창에 표시된 범위 내에서. 즉, 가로 스크롤바가 나타날 때 스크롤바를 끌어당긴 거리입니다.

7.scrollTop

현재 창에 표시되는 범위 내에서 개체의 상단에서 개체의 상단 가장자리까지의 거리입니다. 즉, 세로 스크롤바가 나타날 때 스크롤바를 끌어당긴 거리입니다. 여기에서는 네 가지 브라우저에 의한 document.body의 clientHeight, offsetHeight 및 scrollHeight 해석에 대해 설명합니다. 여기서는 HTML 컨트롤인 경우 여기를 클릭하여 살펴보겠습니다.
4가지 브라우저는 IE(Internet Explorer), NS(Netscape), Opera, FF(FireFox)입니다.


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가 클라이언트 높이 스크롤 막대에 더해진 가시 영역이라고 믿습니다.