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
여기 4개의 브라우저에서 document.body의 clientHeight, offsetHeight 및 scrollHeight를 해석한 것입니다.
4가지 브라우저는 IE(Internet Explorer), NS(Netscape), Opera, FF(FireFox)입니다.
clientHeight
클라이언트 높이의 해석에 대해 4개의 브라우저는 모두 이의를 제기하지 않습니다. 그들은 모두 콘텐츠가 보이는 영역의 높이, 즉 콘텐츠가 있는 영역의 높이라고 생각합니다. 페이지 브라우저에서 볼 수 있는 부분은 일반적으로 도구 모음 아래부터 상태 표시줄 위까지의 영역으로, 페이지 내용과 관련이 없습니다.
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 컨트롤 자체의 높이, 정수, 단위 픽셀을 나타냅니다.
앞서 언급한 '상단 또는 상단'과 '왼쪽 또는 상단' 컨트롤에 대해 설명하겠습니다.
예:
<p id="tool"> <input type="button" value="提交"> <input type="button" value="重置"> </p>
"제출" 버튼의 offsetTop은 "제출" 버튼과 "도구" 레이어의 위쪽 테두리 사이의 거리를 나타냅니다. 왜냐하면 위쪽 가장자리에 가장 가까운 것이 "도구"의 위쪽 테두리이기 때문입니다. " 층.
"재설정" 버튼의 offsetTop은 "재설정" 버튼과 "도구" 레이어의 위쪽 테두리 사이의 거리를 나타냅니다. 위쪽 가장자리에 가장 가까운 것이 "도구" 레이어의 위쪽 테두리이기 때문입니다.
"제출" 버튼의 offsetLeft는 "제출" 버튼과 "도구" 레이어의 왼쪽 테두리 사이의 거리를 나타냅니다. 왼쪽에 가장 가까운 것이 "도구" 레이어의 왼쪽 테두리이기 때문입니다.
"재설정" 버튼의 offsetLeft는 "재설정" 버튼과 "제출" 버튼의 오른쪽 테두리 사이의 거리를 나타냅니다. 왜냐하면 왼쪽에 가장 가까운 것이 "제출" 버튼의 오른쪽 테두리이기 때문입니다.
위 속성은 FireFox에서도 유효합니다.
추가로, 여기서 말하는 것은 document.body가 아닌 HTML 컨트롤의 속성 값을 의미합니다. document.body의 값은 브라우저마다 다르게 해석됩니다(사실 대부분의 환경에서는 그 이유가 있습니다). document.body의 해석에 차이가 있는 것은 오프셋의 다른 해석으로 인해 발생하는 것이 아닙니다. 차이점을 보려면 여기를 클릭하세요.
제목: offsetTop과 style.top의 차이점
기본 지식: offsetTop, offsetLeft, offsetWidth, offsetHeight
offsetTop은 요소 위 또는 외부의 HTML 요소 위치와 스타일을 가져올 수 있다는 것을 알고 있습니다. top도 사용할 수 있는데 둘 사이의 차이점은 다음과 같습니다.
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의 clientHeight, offsetHeight 및 scrollHeight 해석에 대해 설명합니다. 여기서는 HTML 컨트롤인 경우에 대해 설명합니다. 다릅니다. 보려면 여기를 클릭하세요.
4가지 브라우저는 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에서는 위와 같이 설명되지 않습니다. 다른 브라우저에는 이 문제가 없습니다.
제목: 스크롤탑, 스크롤왼쪽, 스크롤Width, 스크롤 높이
3. 스크롤왼쪽
scrollTop은 "스크롤"의 높이 값입니다. 예:
p에 scrollTop을 설정한 경우 해당 내용이 완전히 표시되지 않을 수 있습니다.
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 滚动条加
更多자바스크립트에서 오프셋, 클라이언트, 스크롤 사용법에 대한 자세한 설명相关文章请关注PHP中文网！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
