DOM 크기, DOM 위치

(2021-01-02)
1. DOM 노드의 크기 및 위치컨텐츠 + 패딩 + 스크롤바 + 경계선: offsetHeight, offsetWidth
     - getBoundingCientRect().height, getBoundingCientRect().width 
  ㅇ 컨텐츠 + 패딩 : clientHeight, clientWidth
  ㅇ 보이는 컨텐츠 크기 : getComputedStyle().height, getComputedStyle().width 
  ㅇ 실제 컨텐츠 크기 + 패딩 : scrollHeight, scrollWidth

  ㅇ 화면 상단 ~ 요소 top 경계선 : getBoundingCientRect().top
  ㅇ 화면 상단 ~ 요소 bottom 경계선 : getBoundingCientRect().bottom
  ㅇ 부모 경계선 ~ 요소 top 경계선 : offsetTop 
  ㅇ 부모 경계선 ~ 요소 bottom 경계선 : offsetBottom

  ㅇ 브라우저 창 끝(스크롤바 무시) ~ 클라이언트 영역 : clientX, clientY
  ㅇ 실제 모니터 화면 끝(스크롤바 무시) ~ 클라이언트 영역 : screenX, screenY
  ㅇ 실제 페이지 끝(안보이는 곳 포함) ~ 클라이언트 영역 : pageX, pageY


[JS DOM 제어] 1. DOM 트리 모델 2. DOM 트리,노드 3. DOM 메소드 4. DOM 프로퍼티 5. DOM 노드 접근 6. DOM 요소 컬렉션 7. DOM 크기,위치

 
        최근수정     요약목록     참고문헌