obj가 HTML 컨트롤이라고 가정합니다.
obj.offsetTop은 offsetParent 속성, 정수, 단위 픽셀로 지정된 레이아웃 또는 상위 좌표를 기준으로 계산된 obj의 위쪽 위치를 나타냅니다.
obj.offsetLeft는 offsetParent 속성, 정수, 단위 픽셀로 지정된 레이아웃 또는 상위 좌표를 기준으로 계산된 obj의 왼쪽 위치를 나타냅니다.
obj.offsetWidth는 오버플로로 인해 표시되지 않는 부분을 제외한 obj 컨트롤 자체의 절대 너비, 즉 실제로 차지하는 너비, 정수, 단위 픽셀을 의미합니다.
obj.offsetHeight는 오버플로로 인해 표시되지 않는 부분을 제외한 obj 컨트롤 자체의 절대 높이, 즉 실제로 차지하는 높이, 정수, 단위 픽셀을 의미합니다.
앞서 언급한 offsetParent에 대해 설명해보자.
offsetParent 개체의 offsetTop 및 offsetLeft 속성을 정의하는 컨테이너 개체에 대한 참조를 가져옵니다. offsetTop과 offsetParent는 매우 복잡하고, 브라우저마다 해석이 다르고, 해석도 또 다르기 때문에 일반적으로 브라우저에서 컨트롤의 절대 위치는 이 둘을 통해 얻을 수 있다는 점만 이해하면 됩니다.
위의 속성은 FireFox에서도 유효합니다.
또한 여기서 말하는 내용은 document.body가 아닌 HTML 컨트롤의 속성 값을 참조합니다. document.body의 값은 브라우저마다 다르게 해석됩니다(사실 대부분의 환경은 문서에 대한 서로 다른 해석으로 인해 발생합니다. body , 오프셋의 다른 해석으로 인한 것이 아님)
우리는 offsetTop이 상단 또는 외부 요소에서 HTML 요소의 위치를 얻을 수 있고 style.top도 사용할 수 있다는 것을 알고 있습니다. 둘 사이의 차이점은 다음과 같습니다.
1. offsetTop은 숫자를 반환하고 style.top은 숫자 외에도 px 단위도 반환합니다.
2. offsetTop은 읽기 전용이고 style.top은 읽기/쓰기가 가능합니다.
3. HTML 요소에 최상위 스타일이 지정되지 않은 경우 style.top은 빈 문자열을 반환합니다.
offsetLeft 및 style.left, offsetWidth 및 style.width, offsetHeight 및 style.height의 경우에도 마찬가지입니다.
클라이언트 높이
clientHeight에 대해서는 누구나 이의가 없습니다. 모두가 콘텐츠가 보이는 영역의 높이라고 생각하는데, 이는 일반적으로 페이지 브라우저에서 콘텐츠를 볼 수 있는 영역의 높이를 의미합니다. 마지막 도구 모음과 상태 표시줄 위에는 페이지 내용과 아무 관련이 없습니다.
오프셋 높이
IE와 Opera는 offsetHeight = clientHeight + 스크롤 막대 + 테두리라고 믿습니다.
NS와 FF는 offsetHeight를 웹페이지 콘텐츠의 실제 높이로 간주하며, 이는 clientHeight보다 작을 수 있습니다.
스크롤 높이
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을 기반으로 다양한 해석기 활성화를 지원합니다.
scrollTop은 "롤링된" 높이 값입니다. 예:
다음과 같이 코드 코드를 복사합니다.
<div 아이디="p">
<div id="t">p에 scrollTop을 설정한 경우 해당 내용이 완전히 표시되지 않을 수 있습니다. </div>
</div>
<스크립트 유형="텍스트/자바스크립트">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
외부 요소 p에 scrollTop이 설정되어 있으므로 내부 요소는 위쪽으로 스크롤되고 롤업된 부분은 scrollTop입니다.
scrollLeft도 비슷합니다.
우리는 이미 offsetHeight가 해당 요소의 너비이고, scrollHeight가 내부 요소의 숨겨진 부분을 포함한 내부 요소의 절대 너비라는 것을 알고 있습니다. 위의 경우 p의 scrollHeight는 300이고 p의 offsetHeight는 100입니다.
scrollWidth도 비슷합니다.
IE와 FireFox는 이를 완벽하게 지원하지만 Netscape 8과 Opera 7.6은 scrollTop 및 scrollLeft를 지원하지 않습니다(document.body.scrollTop 및 document.body.scrollLeft 제외).
1.클라이언트 높이, 클라이언트 너비:
이 두 속성은 요소 콘텐츠의 픽셀 높이와 너비를 대략적으로 표시합니다. 이론적으로 이러한 측정은 스타일 시트를 통해 추가된 항목을 고려하지 않습니다.
요소의 여백, 테두리 등.
2.클라이언트왼쪽,클라이언트위:
이 두 가지는 요소 주위의 테두리 두께를 반환합니다. 테두리를 지정하지 않거나 요소를 배치하지 않으면 해당 값은 0입니다.
3.왼쪽으로 스크롤,위로 스크롤:
요소가 스크롤 가능한 경우 이 두 속성을 사용하여 요소가 가로 및 세로 방향으로 얼마나 스크롤되었는지 확인할 수 있습니다. 단위는 픽셀입니다.
스크롤할 수 없는 요소의 경우 이 값은 항상 0입니다.
4. 스크롤 높이, 스크롤 너비:
페이지에 표시되는 개체 수에 관계없이 전체를 가져옵니다.
5.스타일.왼쪽:
포함하는 직사각형의 왼쪽 가장자리로부터 위치가 지정된 요소의 오프셋입니다.
6.스타일.픽셀왼쪽:
위치가 지정된 요소의 왼쪽 테두리 오프셋의 정수 픽셀 값을 반환합니다. 속성의 픽셀이 아닌 값은 단위가 포함된 문자열(예: 30px)을 반환하므로 이 속성을 사용하여 픽셀 단위의 값을 별도로 처리합니다.
7.스타일:posLetf:
해당 스타일시트 요소에 의해 지정된 단위와 상관없이 위치가 지정된 요소의 왼쪽 테두리 오프셋의 숫자 값을 반환합니다. 왜냐하면 속성의 비위치 값은 단위를 포함하는 문자열(예: 1.2em)을 반환하기 때문입니다.
top, pixelTop, posTop과 같은 몇 가지 비유만으로도 충분합니다.
LEFT: 왼쪽에서 오른쪽으로 이동한 위치, 즉 펜던트와 화면 왼쪽 가장자리 사이의 거리입니다.
clientLeft는 객체의 offsetLeft 속성 값과 현재 창 왼쪽의 실제 값 사이의 거리를 반환합니다.
offsetLeft는 상위 개체의 레이아웃이나 좌표를 기준으로 개체의 왼쪽 값을 반환합니다. 상위 개체의 왼쪽 위 모서리를 좌표의 원점으로 사용하고 X 및 Y축의 양수 방향의 x 좌표를 사용합니다. 오른쪽과 아래쪽으로.
pixelLeft는 창 왼쪽을 기준으로 객체의 위치를 설정하거나 반환합니다.
scrollWidth는 가장자리 너비를 제외한 개체의 실제 콘텐츠 너비이며 개체의 콘텐츠 양에 따라 변경됩니다(콘텐츠가 너무 많으면 개체의 실제 너비가 변경될 수 있음).
clientWidth는 스크롤 막대와 기타 가장자리를 제외한 객체의 표시 너비이며 창의 표시 크기에 따라 변경됩니다.
offsetWidth는 스크롤 막대 및 기타 가장자리를 포함하여 개체의 표시 너비이며 창의 표시 크기에 따라 변경됩니다.
IE6.0, FF1.06+:
clientWidth = 너비 + 패딩
클라이언트 높이 = 높이 + 패딩
offsetWidth = 너비 + 패딩 + 테두리
offsetHeight = 높이 + 패딩 + 테두리
IE5.0/5.5:
clientWidth = 너비 - 테두리
clientHeight = 높이 테두리
오프셋 폭 = 너비
오프셋 높이 = 높이
(언급할 필요가 있습니다: CSS의 margin 속성은 clientWidth, offsetWidth, clientHeight 및 offsetHeight와 아무 관련이 없습니다.)
offsetwidth: 상위 요소를 기준으로 한 요소의 오프셋 너비입니다. 테두리+패딩+너비와 동일
clientwidth: 요소의 표시 너비입니다. 패딩+너비와 동일
scrollwidth: 스크롤 부분을 포함한 요소의 너비입니다.
offsetLeft: 자체 offsetParent 요소를 기준으로 하는 Html 요소의 위치입니다.
scrollLeft: 현재 가로 스크롤 작업의 좌표 값을 반환하고 설정합니다.
다음과 같이 코드 코드를 복사합니다.
<input type="button" value="클릭" onclick="move()">
<div id="d" style="배경색:#ff9966; 위치:절대; 왼쪽:170px; 위쪽:100px;너비:300;높이:300;오버플로:스크롤"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<스크립트 언어="자바스크립트">
함수 이동()
{
var d=document.getElementById("d")
a=평가(20)
d.scrollLeft+=a
}
</script>
웹페이지로 저장하고 실행한 후 버튼을 클릭하면 스크롤바가 움직입니다
div를 클릭하고 먼저 a를 기준으로 b의 위치를 팝업한 다음 창을 기준으로 a의 위치를 팝업합니다.