요소 크기 메서드 정리

요소 크기 메서드 정리

요소의 크기나 위치 속성이나 메서드를 알려주는 자바스크립트와 제이쿼리를 알려드리겠습니다.

01. 요소의 가로값 | 세로값 : 패딩/보더/마진 미포함

//하려는 방법
const x = document.querySelector(".class")
document.querySelector(".class").innerHTML = x.clientWidth or clientHeight //가로값 or 세로값

02. 요소의 X축값 | Y축값 : 부모기준

//하려는 방법
const x = document.querySelector(".class")
document.querySelector(".class").innerHTML = x.clientLeft or clientTop //X축값 or Y축값

03. 요소의 가로값 | 세로값 : 패딩/보더 포함 | 마진 미포함

//하려는 방법
const x = document.querySelector(".class")
document.querySelector(".class").innerHTML = x.offsetWidth or offsetHeight //가로값 or 세로값

04. 요소의 X축값 | Y축값 : 문서기준

//하려는 방법
const x = document.querySelector(".class")
document.querySelector(".class").innerHTML = x.offsetLeft or offsetTop //X축값 or Y축값

05. 요소의 top, left, right, bottom, x, y, width, height 방법

//하려는 방법
const x = document.querySelector(".class")
console.log( x.getBoundingClientRect()) //top, left, right, bottom, x, y, width, height

Dimensions	Width()	-	요소의 가로 (패딩/보더/마진 미포함)
	Height()	-	요소의 세로 (패딩/보더/마진 미포함)
	innerWidth()	clientWidth	요소의 가로 (패딩 포함 | 보더/마진 미포함)
	innerHeight()	clientHeight	요소의 세로 (패딩 포함 | 보더/마진 미포함)
	outerWidth()	offsetWidth	요소의 가로 (패딩/보더 포함 | 마진 미포함)
	outerHeight()	offsetHeight	요소의 세로 (패딩/보더 포함 | 마진 미포함)
	outerWidth(true)	-	요소의 가로 (패딩/보더/마진 포함)
	outerHeight(true)	-	요소의 세로 (패딩/보더/마진 포함)
	$(window).width()	innerWidth / outerWidth	브라우저의 가로값 (스크롤바 미포함 / 포함)
	$(window).height()	innerHeight / outerHeight	브라우저의 세로값 (스크롤바 미포함 / 포함)