상쇄간의 차이높이 및 고객높이
javascript dom에서 - offset의 차이는 무엇인가요?높이 및 고객요소의 높이?
클라이언트 높이:
객체에 대한 가시 영역의 높이를 픽셀 단위로 반환합니다.값에는 패딩이 있는 높이가 포함되지만 스크롤 막대, 테두리 및 여백은 포함되지 않습니다.
오프셋 높이:
객체에 대한 가시 영역의 높이를 픽셀 단위로 반환합니다.값에는 패딩, 스크롤 막대 및 테두리가 있는 높이가 포함되지만 여백은 포함되지 않습니다.
그렇게,offsetHeight스크롤 바와 테두리를 포함합니다.clientHeightDoesn't.
Oded로부터의 답은 이론입니다.그러나 적어도 자바스크립트에서 스크롤 작업에 중요할 수 있는 <BODY>나 <HTML> 요소에 대해서는 이론과 현실이 항상 동일하지는 않습니다.
Microsoft는 MSDN에서 좋은 이미지를 가지고 있습니다.
세로 스크롤 막대를 표시하는 HTML 페이지가 있는 경우, <BODY> 또는 <HTML> 요소의 Scroll Height 가 이 이미지가 보여주는 것처럼 Offset Height보다 클 것으로 예상할 수 있습니다.이는 모든 이전 버전의 Internet Explorer(인터넷 익스플로러)에 적용됩니다.
그러나 인터넷 익스플로러 11의 경우에는 그렇지 않으며 파이어폭스 36의 경우에는 그렇지 않습니다.적어도 이러한 브라우저에서 OffsetHeight는 ScrollHeight와 거의 동일하며 이는 잘못된 것입니다.
OffsetHeight가 틀릴 수 있지만, ClientHeight는 항상 맞습니다.
다른 브라우저에서 다음 코드를 사용해 보십시오.
<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
document.write("Body off: " + document.body.offsetHeight
+ "<br>Body cli: " + document.body.clientHeight
+ "<br>Html off: " + document.body.parentElement.offsetHeight
+ "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>
이전 Internet Explorer(인터넷 익스플로러)가 올바르게 표시되는 경우:
Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874
파이어폭스와 인터넷 익스플로러 11의 출력은 다음과 같습니다.
Body off: 1260
Body cli: 1260
Html off: 1276 // this is completely wrong
Html cli: 889
그것은 그 상쇄를 명확하게 보여줍니다.키가 여기가 잘못됐어요.OffsetHeight와 ClientHeight는 몇 개의 픽셀만 다르거나 같아야 합니다.
클라이언트 높이와 OffsetHeight는 눈에 보이지 않는 요소의 경우에도 매우 다를 수 있습니다. 예를 들어, OffsetHeight는 FORM의 실제 크기이고, ClientHeight는 0일 수 있습니다.
client Height = 요소의 높이 + 수직 패딩입니다.
offset 높이 = 요소의 높이 + 수직 패딩 + 상단 및 하단 테두리 + 수평 스크롤 막대(사용 가능한 경우).
다른 추가:
스크롤 높이 = 요소의 콘텐츠 높이(화면에 보이지 않는 콘텐츠 포함) + 세로 패딩.
안쪽에서 바깥쪽으로 요소 레이아웃의 순서는 [(내용 → 패딩) → 스크롤 바 → 테두리] → 여백입니다.
(..) 지역은 다음과 같은 지역을 가리킵니다.client, [...] 에리어는 다음을 말합니다.offset.
마진은 요소의 외부로 간주되며 JS 레이아웃 API에 관여하지 않습니다.
요소의 레이아웃을 얻기 위한 JS API의 전체 목록은 다음과 같습니다.
위해서
Element및 class(HTML및 svg함):getClientRects()getBoundingClientRect().{left,top,right,bottom,x,y,width,height}client{Height,Width,Left,Top}scroll{Height,Width,Left,Top,LeftMax,TopMax}
위해서
HTMLElement클래스(svg 요소 포함 안 함):offset{Height,Width,Left,Top}.위해서
window체:scroll{X,Y},page{X,Y}Offset,inner{Height,Width},outer{Height,Width},screen{Left,X,Top,Y}.위해서
screen체:avail{Top,Left,Height,Width},height,width,lefttop
루트 요소는 스크롤 막대를 얻을 수 없기 때문에(브라우저 스크롤 막대는 루트 요소의 테두리 밖에 있음).코드펜 참조.
사양에 따라 요소가 루트 요소인 경우 및 시기에 대한 특별한 정의가 있습니다.
client*그리고 같은 것이 변환을 무시하고 값을 정수로 반올림하는 동안getClientRects()/getClientBoundingRect()변동 가치의 반환 및 변환을 수반합니다.
이 답에 맞지 않는 면이 많아서 여기에 블로그 글을 정리해서 올렸습니다.
언급URL : https://stackoverflow.com/questions/4106538/difference-between-offsetheight-and-clientheight
'sourcecode' 카테고리의 다른 글
| 마리아를 위한 Innodb 엔진의 변수DB (0) | 2023.10.20 |
|---|---|
| jQuery를 사용하여 대상 요소에서 클릭 좌표를 가져오는 방법 (0) | 2023.10.20 |
| 테이블 Excel VBA에 새 열 삽입 (0) | 2023.10.20 |
| PowerShell에서 EXE 출력 캡처 (0) | 2023.10.20 |
| 따옴표가 있는 URL을 표시하는 입력 필드 (0) | 2023.10.20 |