πŸ“DOM(크기와 μ’Œν‘œ)

λ°•ν–„μ°ŒΒ·2023λ…„ 8μ›” 1일
DOMscrollμ’Œν‘œμ’Œν‘œ
0

μžλ°”μŠ€ν¬λ¦½νŠΈ

λͺ©λ‘ 보기
9/18
<style>
	body{
    	height:1000px;
     	padding:500px 0;
    }
	.parent{
    	width:300px;
      	height:200px;
      	margin-top:1000px;
      	padding:20px;
      	overflow:auto;
      	border: 10px solid;
    }
	.child{
    	height:100px;
      	margin-top:100px;
      	border:10px solid red;
    }
</style>
<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
  </div>  
</body>

window.innerWidth / window.innerHeight

  • ν˜„μž¬ ν™”λ©΄(Viewport)의 크기λ₯Ό μ–»μŠ΅λ‹ˆλ‹€.
console.log(window.innerWidth) //500
console.log(window.innerHeight) //150

window.scrollX / window.scrollY

  • νŽ˜μ΄μ§€μ˜ μ’Œμƒλ‹¨ κΈ°μ€€, ν˜„μž¬ ν™”λ©΄μ˜ viewport 의 μˆ˜ν‰ ν˜Ήμ€ 수직 슀크둀 μœ„μΉ˜λ₯Ό μ–»μŠ΅λ‹ˆλ‹€.
console.log(window.scrollX, window.scrollY) //0 1417

window.scrollTo() / E.scrollTo()

  • μ§€μ •λœ μ’Œν‘œλ‘œ λŒ€μƒ(ν™”λ©΄, 슀크둀 μš”μ†Œ)을 μŠ€ν¬λ‘€ν•©λ‹ˆλ‹€.
  • λŒ€μƒ.scrollTo(xμ’Œν‘œ, yμ’Œν‘œ)
  • λŒ€μƒ.scrollTo({top:Y, left:X, behavior:'smooth'})
setTimeout(()=>{
	window.scrollTo({
    	left:0
      	top:500,
      	behavior:'smooth'
    })
},1000)

E.clientWidth / E.clientHeight

  • ν…Œλ‘λ¦¬ μ„ (border) 을 μ œμ™Έν•œ μš”μ†Œμ˜ 크기λ₯Ό μ–»μŠ΅λ‹ˆλ‹€.
  • 슀크둀 λ°”μ˜ 넓이도 μ œμ™Έλœλ‹€.
const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');

console.log(parentEl.clientWidth , parentEl.clientHeight);
console.log(childEl.clientWidth , childEl.clientHeight);

E.offsetWidth / E.offsetHeight

  • ν…Œλ‘λ¦¬ μ„ (border) 을 ν¬ν•¨ν•œ μš”μ†Œμ˜ 크기λ₯Ό μ–»μŠ΅λ‹ˆλ‹€.

clientWidth 보닀 offsetWidth 을 μ‚¬μš©ν•˜λŠ”κ²ƒμ„ ꢌμž₯ν•œλ‹€. 

const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');

console.log(parentEl.offsetWidth , parentEl.offsetHeight);
console.log(childEl.offsetWidth , childEl.offsetHeight);

E.scrollLeft / E.scrollTop

  • 슀크둀 μš”μ†Œμ˜ μ’Œμƒλ‹¨ κΈ°μ€€, ν˜„μž¬ 슀크둀 μš”μ†Œμ˜ μˆ˜ν‰ ν˜Ήμ€ 수직 슀크둀 μœ„μΉ˜λ₯Ό μ–»μŠ΅λ‹ˆλ‹€.
window.parentEl = document.querySelector('.parent'); 
//window 객체의 .ν‘œκΈ°λ²•μœΌλ‘œ parentEl λΌλŠ” 속성에 ν• λ‹Ήν•΄μ€€λ‹€.
//window.parentEl μ΄λ ‡κ²Œ 할당을 ν•˜λŠ” μ΄μœ λŠ” window κ°μ²΄λŠ” 전역객체이며 ,
//μ „μ—­κ°μ²΄λŠ” μ „μ²΄μ˜μ—­μ—μ„œ μ“Έμˆ˜ μžˆλŠ” κ°μ²΄μ—¬μ„œ parent λΌλŠ” μš”μ†Œμ— 접근을 ν•˜λ €λ©΄ 
//parentEl λΌλŠ” μ΄λ¦„μ˜ λ³€μˆ˜λ₯Ό λ”°λ‘œ window λΌλŠ” 객체에 연결을 ν•΄μ£Όμ–΄μ•Όλ§Œ console μ—μ„œ 
//λ°”λ‘œ μ ‘κ·Όν•˜μ—¬ μ‚¬μš©ν• μˆ˜ 있기 λ•Œλ¬Έμ΄λ‹€.
console.log(parentEl.scrollLeft , parentEl.scrollTop); // 0 0

E.offsetLeft / E.offsetTop

  • νŽ˜μ΄μ§€μ˜ μ’Œμƒλ‹¨ κΈ°μ€€, μš”μ†Œμ˜ μœ„μΉ˜λ₯Ό μ–»μŠ΅λ‹ˆλ‹€.
const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');

console.log(parentEl.offsetLeft , parentEl.offsetTop);
console.log(childEl.offsetLeft , childEl.offsetTop);

E.getBoundingClientRect()

  • ν…Œλ‘λ¦¬ μ„ (border)을 ν¬ν•¨ν•œ μš”μ†Œμ˜ 크기와 ν™”λ©΄μ—μ„œμ˜ μƒλŒ€μœ„μΉ˜ 정보λ₯Ό μ–»μŠ΅λ‹ˆλ‹€.
const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');

console.log(parentEl.getBoundingClientRect);
console.log(childEl.getBoundingClientRect);
profile
λ°•ν–„μ°Œ
κ°œλ°œμžκ°€ 되고 μ‹Άμ–΄μš”
이전 포슀트

DOM (생성 , 쑰회 , μˆ˜μ •)

λ‹€μŒ 포슀트

⭐️Events

0개의 λŒ“κΈ€