ResizeObserver

by hohoya33

HTML

<h1>ResizeObserver Demo</h1>

<p>resize &lt;textarea&gt; below</p>
<p id=rect></p>
<textarea></textarea>

CSS

textarea {
  display: block;
  background-color: rgb(255, 255, 255);
}

JavaScript

const $rect = document.querySelector('#rect')
const $area = document.querySelector('textarea')
const resizeObserver = new ResizeObserver((entries) => {
  for (const {target, contentRect} of entries) {
    console.log(target, contentRect)
    const r = contentRect.width % 255
    const g = contentRect.height % 255
    const b = (contentRect.right + contentRect.bottom) % 255
    const color = `rgb(${r}, ${g}, ${b})`
    target.style.backgroundColor = color
    target.value = color
    $rect.textContent = JSON.stringify(contentRect)
  }
})
resizeObserver.observe($area)