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의 값은 브라우저마다 다르게 해석됩니다(실제로는 대부분의 상황은 오프셋의 다른 해석이 아니라 document.body의 다른 해석으로 인해 발생합니다. 차이점을 보려면 여기를 클릭하세요.
제목: offsetTop과 style.top의 차이점

기본 지식: offsetTop, offsetLeft, offsetWidth, offsetHeight

우리는 offsetTop이 상단 또는 외부 요소에서 HTML 요소의 위치를 ​​얻을 수 있다는 것을 알고 있습니다. style.top도 사용할 수 있습니다. 둘 사이의 차이점은 다음과 같습니다.

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
누구도 clientHeight에 반대하지 않습니다. 동의합니다. 콘텐츠의 표시 영역 높이로, 페이지 브라우저에서 콘텐츠를 볼 수 있는 영역의 높이를 의미합니다. 일반적으로 마지막 도구 모음 아래부터 상태 표시줄 위까지의 영역입니다. 페이지 내용과 아무 관련이 없습니다.

offsetHeight
IE와 Opera는 offsetHeight = clientHeight 스크롤 막대 테두리를 고려합니다.
NS 및 FF는 offsetHeight를 웹 페이지 콘텐츠의 실제 높이로 간주하며, 이는 clientHeight보다 작을 수 있습니다.

scrollHeight
IE와 Opera는 scrollHeight가 웹 페이지 콘텐츠의 실제 높이이며 clientHeight보다 작을 수 있다고 믿습니다.
NS 및 FF는 scrollHeight를 웹페이지 콘텐츠의 높이로 간주하지만 최소값은 clientHeight입니다.

간단히 말하면
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;


scrollTop이 외부 요소 p에 설정되었으므로 내부 요소가 위로 올라갑니다. 연타.

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 :
현재 개체입니다.
참고. 개체가 DIV에 포함된 경우 해당 DIV는 개체의 상위 수준으로 간주되지 않습니다. 즉, 개체의 상위 수준은 DIV를 건너뜁니다. object) 상위 수준이 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 "rn" "Top : " top);
}

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

7.scrollTop
현재 창에 표시되는 범위 내에서 개체의 상단에서 개체의 상단 가장자리까지의 거리입니다.
즉, 세로 스크롤바가 나타날 때 스크롤바를 끌어당긴 거리입니다.


여기에서는 document.body의 clientHeight, offsetHeight 및 scrollHeight를 HTML 컨트롤인 경우에 대해 설명합니다. 여기 확인하세요.

4가지 브라우저는 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 스크롤 막대와 테두리라고 믿습니다. scrollHeight는 웹페이지 콘텐츠의 실제 높이입니다.

마찬가지로
clientWidth, offsetWidth, scrollWidth에 대한 설명은 위와 동일하며 높이를 너비로 바꾸면 됩니다.

설명
위 내용은 DTD HTML 4.01 Transitional을 기준으로 한 것입니다. DTD XHTML 1.0 Transitional이라면 의미가 달라지겠지만, XHTML에서는 이 세 값이 모두 같은 값입니다. 콘텐츠의 실제 높이를 나타냅니다. 대부분의 새 버전의 브라우저는 페이지에 지정된 DOCTYPE을 기반으로 다양한 해석기 활성화를 지원합니다. 테스트 파일을 다운로드하거나 찾아보세요.