1 <! DOCTYPE html로> 2 <HTML LANG = "EN"> 3 <head> 4 <메타 캐릭터 = "UTF-8"> 5 <TITLE> </ TITLE> 6 <스타일> 7 #box { 8 폭 : 200 픽셀 ; 9 높이 200 픽셀; 10 배경 - 색상 : 빨강; (11) 패딩 : 20 픽셀; 12 국경 : 10px 고체 # 000 ; 13 } 14 </ 스타일> 15 </ head> 16 <body> 17 < <script> 19 VAR의 상자 = document.getElementById를 ( '박스' ); 20 CONSOLE.LOG (box.clientWidth, box.clientHeight); // 240 240 21 CONSOLE.LOG (box.offsetWidth, box.offsetHeight); // 260 260 22 </ script> 23 </ body> 24 </ HTML>
폭 + 패딩 clientWidth
폭 + 패딩 + 테두리의 offsetWidth
. (1) 의 폭과 높이를 분석 2 테두리 패딩 + + 콘텐츠의 폭과 높이가 3. CONSOLE.LOG (box.offsetWidth, box.offsetHeight) . 4 . 5 패딩 + 폭 콘텐츠의 높이 . 6 CONSOLE.LOG (box.clientWidth, box.clientHeight );
가로 스크롤의 콘텐츠 내부의 내용의 높이
CONSOLE.LOG (box.scrollWidth, box.scrollHeight);
. (1) // offsetLeft : 현재 요소 멀리 부모 박스 떠난 위치 2 // offsetTop : 상위 케이스의 상면부터의 거리에 위치 된 현재 요소의 위치 . 3 CONSOLE.LOG (box.offsetLeft, box.offsetTop) . 4 . 5 // clientLeft는 : 테두리 폭을 왼쪽으로 6. // 의 clientTop : 상부 테두리의 폭 7. CONSOLE.LOG (box.clientLeft, box.clientTop) 8. 9. // scrollLeft에가 : 압연 왼쪽 길이; 10 // scrollTop : 상부 롤의 길이 . 11 CONSOLE.LOG (box.scrollLeft, box.scrollTop);