offsetLeft, Left 및 clientLeft_Basic 지식의 차이점에 대한 간략한 분석

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
클라이언트 높이에 대해 누구도 이의를 제기하지 않습니다. 그들은 모두 콘텐츠의 가시 영역의 높이라고 생각합니다. 콘텐츠는 페이지 브라우저에서 볼 수 있습니다. 일반적으로 마지막 도구 모음 아래부터 상태 표시줄 위까지의 영역은 페이지 콘텐츠와 아무 관련이 없습니다.

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을 기반으로 다양한 해석기 활성화를 지원합니다.

scrollTop은 "스크롤된" 높이 값입니다. 예:

코드 복사 코드는 다음과 같습니다.

p에 scrollTop을 설정한 경우 해당 내용이 완전히 표시되지 않을 수 있습니다.

바깥쪽 요소 p에 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.clientHeight, clientWidth:
이 두 속성은 요소 콘텐츠의 픽셀 높이와 너비를 대략적으로 표시합니다. 이론적으로 이러한 측정에서는
를 통해 추가된 내용을 고려하지 않습니다. 스타일 시트 요소의 여백, 테두리 등

2.clientLeft, clientTop:
이 두 가지는 요소 주위의 테두리 두께를 반환합니다. 테두리를 지정하지 않거나 요소를 배치하지 않으면 해당 값은 0입니다.

3.scrollLeft,scrollTop:
요소가 스크롤 가능한 경우 이 두 속성을 사용하여 요소가 가로 및 세로 방향으로 얼마나 스크롤되었는지 확인할 수 있습니다. 단위는 픽셀입니다.
스크롤할 수 없는 요소의 경우 이 값은 항상 0입니다.

4.scrollHeight,scrollWidth:
페이지에 표시되는 개체 수에 관계없이 전체를 가져옵니다.

5.style.left:
포함 직사각형의 왼쪽 가장자리에서 위치 지정 요소의 오프셋

6.style.pixelLeft:
위치가 지정된 요소의 왼쪽 테두리 오프셋의 정수 픽셀 값을 반환합니다. 왜냐하면 속성의 픽셀이 아닌 값은 단위를 포함하는 문자열을 반환하기 때문입니다. 예: 30px 이 속성을 사용하여 픽셀 단위로 값을 개별적으로 처리합니다.

7.style:posLetf:
해당 스타일 시트 요소에서 지정한 단위와 상관없이 위치가 지정된 요소의 왼쪽 테두리 오프셋 숫자 값을 반환합니다. 속성의 값은 단위 문자열을 포함하는 값을 반환합니다. 예를 들어 1.2em

top, pixelTop, posTop은 단지 일부 비유일 뿐입니다.

LEFT: 왼쪽에서 오른쪽으로 이동한 위치, 즉 위젯과 화면 왼쪽 가장자리 사이의 거리입니다.

clientLeft 객체의 offsetLeft 속성 값과 위젯 사이의 거리를 반환합니다. 현재 창 왼쪽의 실제 값

offsetLeft 상위 개체의 레이아웃이나 좌표를 기준으로 개체의 왼쪽 값을 반환합니다. 상위 개체의 왼쪽 위 모서리를 원점으로 사용합니다. 좌표, X 및 Y 축의 양의 방향인 오른쪽과 아래쪽의 x 좌표

pixelLeft 창 왼쪽을 기준으로 개체의 위치를 ​​설정하거나 반환합니다.

scrollWidth는 가장자리 너비를 제외한 개체의 실제 콘텐츠 너비이며 개체의 콘텐츠 양에 따라 변경됩니다(콘텐츠가 너무 많으면 개체 너비가 변경될 수 있음) 실제 너비).

clientWidth는 스크롤 막대 및 기타 가장자리를 제외한 개체의 표시 너비이며 창의 표시 크기에 따라 변경됩니다.

offsetWidth는 스크롤 막대 및 기타 가장자리를 포함하여 개체의 표시되는 너비이며 창의 표시 크기에 따라 변경됩니다.

IE6.0, FF1.06:
clientWidth = 너비 패딩
clientHeight = 높이 패딩
offsetWidth = 너비 패딩 테두리
offsetHeight = 높이 패딩 테두리
IE5.0/5.5:
clientWidth = 너비 - 테두리
clientHeight = 높이 - 테두리
offsetWidth = 너비
offsetHeight = 높이
(설명할 필요: CSS의 여백 속성은 clientWidth, offsetWidth, clientHeight, offsetHeight는 관련이 없습니다)

offsetwidth: 상위 요소를 기준으로 한 요소의 오프셋 너비입니다. 테두리 패딩 너비와 동일
clientwidth: 요소의 표시 너비입니다. 패딩 너비와 동일
scrollwidth: 요소의 너비이며 스크롤 부분을 포함합니다.
offsetLeft: 자체 offsetParent 요소에 상대적인 Html 요소의 위치
scrollLeft: 현재 가로 스크롤 작업의 좌표 값을 반환하고 설정합니다.

복사 코드 코드는 다음과 같습니다.

onclick="경고( 'offsetLeft:' this.offsetLeft)">

웹페이지로 저장하고 실행한 후 버튼 클릭, 스크롤바 이동
div를 클릭하면 b 상대 위치가 먼저 팝업됩니다. a 위치에 창을 기준으로 a 상대 위치가 팝업됩니다

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.