Web Design Leaves

// オブザーバーを生成して変数 myObserver に代入
const myObserver = new ResizeObserver( (entries, observer) => {
  //サイズ変更を検知した際に実行する処理
});

//コールバック関数を別途定義
const callback = (entries, observer) => {
  //サイズ変更を検知した際に実行する処理
}

// コールバック関数を渡してオブザーバーを生成
const myObserver = new ResizeObserver(callback);

const myObserver = new ResizeObserver( (entries) => {
  for (let entry of entries) {
    console.log('Target: ' + entry.target.tagName);
    console.log('width:' + entry.contentRect.width);
    console.log('height:' + entry.contentRect.height);
  }
});
// 監視対象の要素（テキストエリア）を取得して変数に代入
const targetElem = document.querySelector('textarea');
// observe() に監視対象の要素を指定して監視を開始
myObserver.observe(targetElem);
// または myObserver.observe(document.querySelector('textarea'));

<textarea></textarea>

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    //contentBoxSize プロパティから幅を取得
    const width = entry.contentBoxSize[0].inlineSize;
    //contentBoxSize プロパティから高さを取得
    const height = entry.contentBoxSize[0].blockSize;
    //グラデーションの値を調整するための適当な値
    const diff = Math.round((width + height) / 7);
    //幅と高さによりグラデーションを変化させる
    entry.target.style.backgroundImage = `
      linear-gradient(
        ${width > height ? 90 : 180}deg,
        royalblue ${-80 - diff}%,
        pink ${40 - diff}%,
        palegoldenrod ${80 - diff}%,
        mediumaquamarine ${180 - diff}%,
        blue ${300 - diff}%
    )`;
    //テキストを表示する p 要素を取得
    const p = entry.target.querySelector('p');
    //幅と高さの値により表示するテキストを変更
    if (width > 200 && height > 20 || width > 100 && height > 40) {
      p.textContent = `width: ${width}px height: ${height}px`;
    } else {
      //テキストを表示するのに十分なサイズがなければテキストを空に
      p.textContent = '';
    }
    //サイズ（幅と高さの合計）により文字色を切り替え
    if(width + height > 1000) {
      p.style.color = '#fff';
    } else {
      p.style.color = '#333';
    }
  }
});
ro.observe(document.querySelector('.gradient.resizable'));

<div class="gradient resizable">
  <p></p>
</div><span class="red-arrow">←</span>

.resizable {
  /* 垂直及び水平方向のリサイズを許可 */
  resize: both;
  /* visible 以外を指定 */
  overflow: auto;
}
.gradient {
  width: 200px;
  height: 50px;
  min-width: 40px;
  min-height: 20px;
  margin: 20px 0;
  border: 1px solid #ccc;
  font-size: 14px;
  /* p 要素の基準に */
  position: relative;
  /* span 要素を横並びに */
  display: inline-block;
  /* 背景にリニアグラテーションを適用 */
  background-image: linear-gradient(
    royalblue -80%, /* 始点 */
    pink 40%,
    palegoldenrod 80%,
    mediumaquamarine 180%,
    blue 300% /* 終点 */
  );
}
.gradient p {
  margin: 0;
  padding: 0;
  /* 垂直及び水平方向に中央寄せ */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.red-arrow {
  color: red;
  display: inline-block;
  transform: translateY(-8px) rotate(45deg);
}

// オブザーバーを生成
const ro = new ResizeObserver( (entries) => {
  //省略
});

// #foo の監視を開始
ro.observe(document.querySelector('#foo'));
// #bar の監視を開始
ro.observe(document.querySelector('#bar'));

<h3>Default Title</h3>
<p style="border: 1px dashed green; max-width: 680px;"></p>
<textarea style="width: 70%; min-width: 300px;"></textarea>
<p>同時に発生したサイズ変更の数： <span id="count"></span></p>

// p 要素の変更前の width を保存する変数
let p_prev_width;
//同時に発生したサイズ変更の数の出力先の要素
const countSpan = document.getElementById('count');

const ro = new ResizeObserver( (entries) => {
  //発生したサイズ変更の数
  const count = entries.length;
  //サイズ変更の数を出力
  countSpan.textContent = count;

  for (let entry of entries) {
    // 変更された要素
    const targetElem = entry.target;
    // 変更された要素の幅
    const width = entry.contentRect.width;
    // 変更された要素が h3 要素の場合
    if(targetElem.tagName === 'H3'){
      if(width >= 600) {
        targetElem.textContent = '幅は 600px 以上です';
        targetElem.style.backgroundColor = 'lightblue';
      }else{
        targetElem.textContent = '幅は 600px 未満です';
        targetElem.style.backgroundColor = 'yellow';
      }
    }
    // 変更された要素が p 要素の場合
    if(targetElem.tagName === 'P'){
      // p_prev_width の値がまだ無い場合は width を代入（初回）
      if(!p_prev_width) p_prev_width = width;
      if( p_prev_width < width) {
        targetElem.textContent = '増加しました。';
      }else if (p_prev_width === width) {
        targetElem.textContent = 'まだ変更されていません';
      }else{
        targetElem.textContent = '減少しました。';
      }
      // p_prev_width の値を更新
      p_prev_width = width;
    }
    // 変更された要素が textarea 要素の場合
    if(targetElem.tagName === 'TEXTAREA'){
      //幅が300px未満では背景色は透明、400px以上では背景色をピンクに
      targetElem.style.backgroundColor = width < 400 ? 'transparent': 'pink';
    }
  }
});

// h3 要素の監視を開始
ro.observe(document.querySelector('h3'));
// p 要素の監視を開始
ro.observe(document.querySelector('p'));
// textarea要素の監視を開始
ro.observe(document.querySelector('textarea'));

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('width: ' + entry.contentRect.width);
    console.log('height: ' + entry.contentRect.height);
  }
});
const target = document.querySelector('#target');
ro.observe(target);

console.log('開始');

setTimeout(() => {
  console.log('1秒後');
  // p 要素を生成
  const p = document.createElement('p');
  // p 要素にテキストを設定
  p.textContent = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit.';
  // div#target に p 要素を追加
  target.appendChild(p);
}, 1000);

setTimeout(() => {
  console.log('2秒後');
  // div#target から p 要素を削除
  target.removeChild(target.querySelector('p'))
}, 2000);

<div id="foo">Foo</div>
<div id="bar">Bar</div>
<div id="baz">Baz</div>
<button>Change</button>

#foo {
  width: 100px;
}
#bar {
  width: 200px;
  display: none;
}
#baz {
  width: 300px;
}

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log(entry.target.id + ' width: ' + entry.contentRect.width);
  }
});
const foo = document.getElementById('foo');
const bar = document.getElementById('bar');
const baz = document.getElementById('baz');
ro.observe(foo);
ro.observe(bar);
ro.observe(baz);

//ボタンのイベントリスナーを設定
document.querySelector('button').addEventListener('click', ()=> {
  console.log('button is clicked!');
  //display プロパティを block から none に
  foo.style.display = 'none';
  //display プロパティを none から block に
  bar.style.display = 'block';
  //要素を削除
  baz.parentNode.removeChild(baz);
});

#foo {
  width: 100px;
}
#bar {
  width: 200px;
  /* display に inline を指定 */
  display: inline;
}
#baz {
  /* サイズを 0 に */
  width: 0;
  height: 0;
}

document.querySelector('button').addEventListener('click', ()=> {
  console.log('button is clicked!');
  // transform の scale() で大きさを変更
  foo.style.setProperty('transform', 'translateX(50px) scale(2,2)');
  // インラインの要素に高さを設定（意味がない）
  bar.style.height = '100px';
  // サイズを 0 から変更
  baz.style.width = '100px';
  baz.style.height = '20px';
});

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    // タグ名を出力
    console.log(entry.target.tagName); // DIV
    // クラス名を出力
    console.log(entry.target.className); // targetDiv
    // テキストを出力
    console.log(entry.target.textContent); // Hello!
    // CSS プロパティのオブジェクトを取得
    const style = window.getComputedStyle(entry.target);
    // CSS の border の値を出力
    console.log(style.border); // 1px solid rgb(153, 153, 153)
  }
});
ro.observe(document.querySelector('.targetDiv'));

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    // contentRect から幅を取得
    const width = entry.contentRect.width;
    // contentRect から高さを取得
    const height = entry.contentRect.height;
    console.log(width);  //200（初期値の例）
    console.log(height); //50（初期値の例）
  }
});
ro.observe(document.querySelector('.targetDiv'));

const width = entry.contentBoxSize ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width;

const height = entry.contentBoxSize ? entry.contentBoxSize[0].blockSize : entry.contentRect.height;

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    // contentBoxSize[0] から幅を取得
    const width = entry.contentBoxSize[0].inlineSize;
    // contentBoxSize[0] から高さを取得
    const height = entry.contentBoxSize[0].blockSize;
    console.log(width);  //200（初期値の例）
    console.log(height); //50（初期値の例）
  }
});
ro.observe(document.querySelector('.targetDiv'));

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    // borderBoxSize[0] から幅を取得
    const width = entry.borderBoxSize[0].inlineSize;
    // borderBoxSize[0] から高さを取得
    const height = entry.borderBoxSize[0].blockSize;
    console.log(width);  //222（初期値の例）パディングとボーダーを含む
    console.log(height); //72（初期値の例）パディングとボーダーを含む
  }
});
ro.observe(document.querySelector('.targetDiv'));

const targetDiv = document.querySelector('.targetDiv');
console.log(targetDiv.offsetWidth);  //222
console.log(targetDiv.offsetHeight);  //72
console.log(targetDiv.getBoundingClientRect().width);  //222
console.log(targetDiv.getBoundingClientRect().height);  //72

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    // devicePixelContentBoxSize[0] から幅を取得
    const width = entry.devicePixelContentBoxSize[0].inlineSize;
    // devicePixelContentBoxSize[0] から高さを取得
    const height = entry.devicePixelContentBoxSize[0].blockSize;
    console.log(width);  //400（初期値の例 ※画面解像度により異なる）
    console.log(height); //100（初期値の例 ※画面解像度により異なる）
  }
});
ro.observe(document.querySelector('.targetDiv'));

resizeObserver.observe(target, options)

resizeObserver.observe(divElem, { box : 'border-box' });

<div class="debounce"></div>
<p>width: <span class="print-width"></span></p>

.debounce {
  resize: both;
  overflow: auto;
  width: 200px;
  height: 50px;
  border: 1px solid #ccc;
}

let timer = 0;
//終了と判定するまでの遅延時間（ミリ秒）
const delay = 200;

const ro = new ResizeObserver((entries) => {
  clearTimeout(timer);
  timer = setTimeout( () => {
    for (let entry of entries) {
      //乱数で16進数の色を生成
      const color = "#" + Math.random().toString(16).slice(-6);
      //背景色を設定
      entry.target.style.backgroundColor = color;
      //幅を span 要素に出力
      document.querySelector('.print-width').textContent = entry.contentRect.width;
    }
  }, delay);
});
//監視を開始
ro.observe(document.querySelector('.debounce'));

//Debounce 用の関数の定義
const debounce = (func, delay) => {
  let timer = 0;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(null, args), delay);
  }
}

// debounce() を使ったコールバック関数をコンストラクターに渡す
const ro = new ResizeObserver( debounce( (entries) => {
  for (let entry of entries) {
    //乱数で16進数の色を生成
    const color = "#" + Math.random().toString(16).slice(-6);
    //背景色を設定
    entry.target.style.backgroundColor = color;
    //幅を span 要素に出力
    document.querySelector('.print-width').textContent = entry.contentRect.width;
  }
}, 200));
//監視を開始
ro.observe(document.querySelector('.debounce'));

let timer;
const delay = 500;

const ro = new ResizeObserver((entries) => {
  // timer が正の整数（0以外）であれば何もしない
  if ( timer ) return ;

  //setTimeout() は正の整数値を返す
  timer = setTimeout( () => {
    // timer に 0 を設定
    timer = 0 ;
    for (let entry of entries) {
      //乱数で16進数の色を生成
      const color = "#" + Math.random().toString(16).slice(-6);
      //背景色を設定
      entry.target.style.backgroundColor = color;
      //幅を span 要素に出力
      document.querySelector('.print-width').textContent = entry.contentRect.width;
    }
  }, delay);
});

ro.observe(document.querySelector('.debounce'));

//Throttle 用の関数の定義
const throttle = (func, limit) => {
  let lastFunc
  let lastRan
  return (...args) => {
    if (!lastRan) {
      func.apply(null, args)
      lastRan = Date.now()
    } else {
      clearTimeout(lastFunc)
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(null, args)
          lastRan = Date.now()
        }
      }, limit - (Date.now() - lastRan))
    }
  }
}

// throttle() を使ったコールバック関数を渡す
const ro = new ResizeObserver(throttle((entries) => {
  for (let entry of entries) {
    //乱数で16進数の色を生成
    const color = "#" + Math.random().toString(16).slice(-6);
    //背景色を設定
    entry.target.style.backgroundColor = color;
    //幅を span 要素に出力
    document.querySelector('.print-width').textContent = entry.contentRect.width;
  }
}, 500));

ro.observe(document.querySelector('.debounce'));

// 要素の幅を基にクラスを設定するためのオブジェクトの配列
const modes = [
  {
    name: "small",
    min: 0,
    max: 300
  },
  {
    name: "medium",
    min: 300,
    max: 600
  },
  {
    name: "large",
    min: 600,
    max: Infinity
  },
];
// クラス名の配列
const modeClasses = [];
modes.forEach((mode) => {
  // modes の各オブジェクトの name の値を modeClasses に追加
  modeClasses.push(mode.name);
});

// 要素の縦横比を基にクラスを設定するためのオブジェクトの配列
const ratios = [
  {
    name: "portrait",
    min: 0,
    max: 0.875
  },
  {
    name: "square",
    min: 0.875,
    max: 1.125
  },
  {
    name: "landscape",
    min: 1.125,
    max: Infinity
  },
];
// クラス名の配列
const ratioClasses = [];
ratios.forEach((ratio) => {
  // ratios の各オブジェクトの name の値を ratioClasses に追加
  ratioClasses.push(ratio.name);
});

document.addEventListener("DOMContentLoaded", () => {
  //target クラスの要素を取得
  const targets = document.querySelectorAll('.target');
  //target クラスの要素が存在すれば
  if(targets.length > 0) {
    // ResizeObserver のインスタンスを生成
    const resizeObserver = new ResizeObserver((entries) => {
      for (entry of entries) {
        //サイズが変更された監視対象の要素
        const target = entry.target;
        //その要素の変更後の幅（パディングとボーダーを含む）
        const width = entry.borderBoxSize[0].inlineSize;
        //その要素の変更後の高さ（パディングとボーダーを含む）
        const height = entry.borderBoxSize[0].blockSize;
        //縦横比
        const ratioValue  = width / height;
        //その要素に指定されているクラス
        const targetClassList = target.classList;

        //配列 modes から変更後の幅にマッチするするオブジェクトを取得
        const mode = modes.find((mode) => mode.min <= width && mode.max >= width);
        modeClasses.forEach((value) => {
          //mode のクラス（small, medium, large）が指定されていれば一度クリア
          targetClassList.remove(value);
        });
        ///mode のクラスを追加
        targetClassList.add(mode.name);

        //配列 ratios から変更後の縦横比にマッチするするオブジェクトを取得
        const ratio = ratios.find((ratio) => ratio.min <= ratioValue && ratio.max >= ratioValue);
        ratioClasses.forEach((value) => {
          //ratio のクラス（portrait, square, landscape）が指定されていれば一度クリア
          targetClassList.remove(value);
        });
        //ratio のクラスを追加
        targetClassList.add(ratio.name);
      }
    });
    //それぞれの監視対象の要素
    targets.forEach((target) => {
      //target クラスの要素の監視を開始
      resizeObserver.observe(target);
    });
  }
}, false);

const modes = [
  {
    name: "xs",  //追加
    min: 0,
    max: 100
  },
  {
    name: "small",
    min: 100,
    max: 300
  },
  {
    name: "medium",
    min: 300,
    max: 600
  },
  {
    name: "large",
    min: 600,
    max: 900
  },
  {
    name: "xl",  //追加
    min: 900,
    max: Infinity
  }
];

<!-- スクロールバーを表示する要素 -->
<div class="chat">
  <!-- チャットのテキストが追加される要素 -->
  <div class="chat-text">
    <!-- チャットのテキスト -->
    <div><strong>Foo</strong> : hi </div>
    <div><strong>Bar</strong> : hi </div>
  </div>
</div>

<!-- ダミーのチャットテキストを追加するボタン -->
<button id="add-chat">Add Chat Message</button>

/* スクロールバーを表示する要素 */
.chat {
  overflow: scroll;  /* スクロールバーを表示 */
  height: 440px;  /* 高さを指定 */
  width: 440px;
  min-width: 200px;
  border: 1px solid #999;
  padding: .5rem;
  resize: both;
  margin-top: 1rem;
  background-color: #ccc;
}
/* チャットテキストの要素 */
.chat-text > div {
  background-color: #fff;
  margin: 1rem 0;
  padding: 5px;
}
/* ダミーのチャットテキストを追加するボタン */
#add-chat {
  background-color: #607b69;
  color: #fff;
  padding: .5rem 1rem;
  border: 1px solid #31573e;
  cursor: pointer;
}