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 是“卷”起来的高度值，示例：
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7529
15
1378
52
81
11
54
19
21
75
스크롤 버튼이란 무엇입니까?
Feb 22, 2023 pm 02:29 PM
스크롤은 컴퓨터 키보드의 기능 키인 스크롤 잠금 키입니다. 스크롤 키는 워드와 엑셀에서 흔히 사용되는 기능입니다. 스크롤 잠금을 끄고 페이지 넘김 키를 사용하면 셀의 선택 영역이 이동하지만 스크롤 잠금 키를 누르면 선택 영역이 이동하지 않습니다. .
키보드 스크롤 표시등은 무엇을 의미합니까?
Feb 20, 2023 pm 01:42 PM
키보드 스크롤 표시등이 켜져 있다는 것은 "Scroll Lock"이 활성화되었음을 의미합니다. Win 시스템에서는 Scroll Lock 키가 사용되지 않지만 일부 소프트웨어는 이 키를 누른 후 Excel 위쪽 및 아래쪽 키가 잠깁니다. 스크롤 커서는 페이지를 스크롤합니다. 이 키를 놓으면 위쪽 및 아래쪽 키를 누르면 페이지가 스크롤되지 않고 커서가 스크롤됩니다.
방화벽 Linux 방화벽
Feb 19, 2024 pm 06:24 PM
방화벽 방화벽 방화벽 서비스에는 CLI와 GUI의 두 가지 작동 모드가 있습니다. iptables와 비교하여 방화벽은 동적 업데이트를 지원하고 영역 개념을 도입합니다. 간단히 말해서, 영역은 방화벽에서 미리 정의한 방화벽 정책 집합을 말하며, 이러한 정책을 방화벽 간에 신속하게 전환할 수 있도록 하여 방화벽의 전환 효율성과 적용 속도를 크게 향상시킵니다. 신뢰할 수 있는 영역 기본 정책 규칙은 모든 홈 패킷이 들어오는 트래픽을 거부하도록 허용하지만 ssh, mdns, ipp-client 및 dhcpv6-client 서비스는 홈 영역 작업과 동등한 내부를 통과하여 들어오는 트래픽을 거부하도록 허용합니다.
스크롤을 이해하는 방법
May 23, 2023 pm 01:40 PM
스크롤 너비 및 높이 scrollHeight scrollHeight는 오버플로로 인해 웹 페이지에 표시할 수 없는 보이지 않는 부분을 포함하여 요소의 전체 높이를 나타냅니다. scrollWidth scrollWidth는 웹에 표시할 수 없는 보이지 않는 부분을 포함하여 요소의 전체 너비를 나타냅니다. 오버플로로 인한 페이지 [참고] IE7-Browser 반환 값이 정확하지 않습니다. [1] 스크롤 막대가 없는 경우 scrollHeight 및 clientHeight 속성이 동일하고, scrollWidth 및 clientWidth 속성이 동일합니다. //120120console.log(test.scrollHeight ,test.s
v-on:scroll을 사용하여 Vue에서 스크롤 이벤트를 수신하는 방법
Jun 11, 2023 pm 12:14 PM
Vue는 현재 가장 널리 사용되는 프런트엔드 프레임워크 중 하나입니다. Vue는 일반적인 이벤트 모니터링 외에도 v-on:scroll이라는 스크롤 이벤트 모니터링을 위한 지침도 제공합니다. 이 글에서는 v-on:scroll을 사용하여 Vue에서 스크롤 이벤트를 수신하는 방법을 자세히 소개합니다. 1. v-on:scroll 명령어의 기본 사용법 v-on:scroll 명령어는 DOM 요소의 스크롤 이벤트를 모니터링하는 데 사용됩니다. 기본 사용법은 다음과 같습니다. <divv-on:scroll="sc
PHP 공지: 정의되지 않은 오프셋 솔루션
Jun 25, 2023 am 09:51 AM
PHPNotice:Undefineoffset은 일반적인 PHP 프로그램 오류입니다. 이는 프로그램이 배열에 존재하지 않는 첨자를 사용하려고 시도하여 프로그램이 정상적으로 실행되지 않음을 의미합니다. 이 오류는 일반적으로 PHP 인터프리터가 다음 경고 메시지를 표시할 때 발생합니다. 주의 사항: 정의되지 않은 오프셋. PHPNotice:Undefineoffset 오류를 해결하는 몇 가지 방법은 다음과 같습니다. 먼저 코드를 확인하세요.
CSS에서 스크롤을 숨기는 방법
Jan 28, 2023 pm 02:02 PM
CSS에서 스크롤을 숨기는 방법: 1. Firefox에서는 "scrollbar-width: none; /* Firefox */" 속성을 통해 스크롤 막대를 숨길 수 있습니다. 2. IE 브라우저에서는 "-ms-prefix"를 사용할 수 있습니다. " 속성 스크롤 막대 스타일을 정의합니다. 3. Chrome 및 Safari에서는 CSS 스크롤 막대 선택기를 사용한 다음 "display:none"을 통해 숨길 수 있습니다.
다양한 MySQL 페이징 구현
Feb 19, 2024 pm 03:26 PM
MySQL의 페이징 방법은 무엇입니까? 특정 코드 예제가 필요합니다. MySQL은 쿼리 효율성을 높이고 데이터 전송량을 줄이기 위해 매우 일반적인 요구 사항입니다. MySQL은 다양한 페이징 방법을 제공합니다. 이러한 방법은 아래에서 자세히 소개되고 구체적인 코드 예제가 제공됩니다. LIMIT 절을 사용한 페이징: LIMIT 절은 쿼리 결과에 반환되는 행 수를 제한하는 데 사용됩니다. 여기에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 반환된 결과의 시작 오프셋 위치(0부터 계산)를 지정하고 두 번째 매개변수는
