div의 크기 조정 이벤트를 선택하는 방법(참고)

div의 크기를 선택하는 방법의 메모.
resize 이벤트는 div와 같은 요소에서 발화하지 않습니다. . . window의 리사이즈라면 발화합니다만. . .
그래서, 요소의 리사이즈시에 이벤트를 픽업하는 방법을 조사해 보면, 다음의 페이지가 발견되었습니다. 참고로 했습니다!

참고
Div 태그의 resize 이벤트를 선택하려면 - souki-paranoiast 블로그 htps : // 소키 파라노이아 st. 하테나 bぉg. 코m/엔트리/2018/12/08/231152

resize.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>test</title>

  <style type="text/css" scoped>
    #resizeable{
      border: solid 3px;
      border-color: blue;
      width: 100px;
      height: 100px;
      overflow: auto;
      resize: both;
    }
  </style>
</head>

<body>
  <h1>リサイズサンプル</h1>
  <div id="main">
    <div>
      <div id="resizeable"></div>
    </div>
  </div>
  <script>
    //イベント登録
    document.addEventListener('DOMContentLoaded', () => {
      //要素のリサイズイベント取得
      const observer = new MutationObserver(() => {
        const resizeable = document.getElementById('resizeable')
        //要素のサイズ確認
        const width = resizeable.getBoundingClientRect().width
        const height = resizeable.getBoundingClientRect().height
        console.log('size(w,h): ', width, height)
      })
      observer.observe(resizeable, {
        attriblutes: true,
        attributeFilter: ["style"]
      })
    }, false)
  </script>

</body>

</html>

과연. Observer를 사용하면 좋았습니다. 참고가 되었습니다! 감사합니다 m (_ _) m


좋은 웹페이지 즐겨찾기