230324 - js(offset)

๋ฐฑ์Šน์—ฐยท2023๋…„ 3์›” 24์ผ
1

๐Ÿšฉ javascript

offset

  • 23์ผ์— ์ž‘์„ฑํ•˜๋˜ ๊ฒƒ ์ด์–ด์„œ ์ž‘์„ฑ

โœ’๏ธ ์ฝ”๋“œ ์ž‘์„ฑ

์ž…๋ ฅ

css

* { margin:0; padding:0; box-sizing:border-box; }
article { position: relative; margin:50px; border: 2px solid black;}
h2 { padding:20px 0 ;}
p { position:absolute; top:0; left:0;
    width:0; height:0;      
    border:10px solid red; transition:0.5s ease-in; }
.offset2 img { height:200px; }

html

<article class="offset1">
  <h2>offset1</h2>
  <img src="../img/pic7.jpg" alt="">
  <p></p>
</article>

<article class="offset2">
  <h2>offset2</h2>
  <figure>
    <img src="../img/pic3.jpg" alt="">
    <img src="../img/kang.jpg" alt="">
    <img src="../img/ball.jpg" alt="">
    <img src="../img/pic9.jpg" alt="">
  </figure>
  <p></p>
</article>

js

// offset1
const offset1Img = document.querySelector('.offset1 img');
const offset1P = document.querySelector('.offset1 p');

offset1Img.onclick = function(){
  const aaa = offset1Img.offsetWidth; 
  console.log(aaa)

  offset1P.style = `width: ${aaa}px;  
height: ${this.offsetHeight}px;
top: ${this.offsetTop}px;
left: ${this.offsetLeft}px;
`;
}

// offset2
function init () {
  // ๊ฐ๊ฐ์˜ ์ด๋ฏธ์ง€์— ๋งˆ์šฐ์Šค ์ ์šฉํ•ด์•ผ ํ•จ
  const offset2Img = document.querySelectorAll('.offset2 img');
  const offset2P = document.querySelector('.offset2 p'); 

  offset2Img.forEach(function(img){
    img.onmouseover = function(){
      offset2P.style = `width: ${this.offsetWidth}px;
height: ${this.offsetHeight}px;
top: ${this.offsetTop}px;
left: ${this.offsetLeft}px;`;
    }
  })
};
// init();
window.addEventListener("load", init);

/*
    A.offsetWidth     -A์˜ ๊ฐ€๋กœํฌ๊ธฐ (๊ฒฐ๊ณผ๊ฐ’์€ ์ •์ˆ˜. padding,borderํฌํ•จ)
    A.offsetTop       -offsetParent ๊ธฐ์ค€์œผ๋กœ ์œ„์—์„œ ๋ถ€ํ„ฐ ์–ผ๋งˆ ๋–จ์–ด์ ธ์žˆ๋Š”์ง€

    A.offsetParent - A์˜ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์กฐ์ƒ์š”์†Œ(css์„ค์ • ๊ธฐ์ค€)
    */

์ถœ๋ ฅ

  • ์ด๋ฏธ์ง€๋กœ ๋Œ€์ฒด









profile
๊ณต๋ถ€ํ•˜๋Š” ๋ฒจ๋กœ๊ทธ

0๊ฐœ์˜ ๋Œ“๊ธ€