场景

2023年03月14日

柏拉文

越努力，越幸运

一、监听、关闭监听元素大小

---

描述: 使用 resize observer 去更改 container 元素内容的显示。随着 slider 的值被改变，也引起了包含的 <div> 的宽度改变。我们也提供了一个 checkbox 来关闭和打开 observer。如果它是关闭的，文本将不会随着 <div> 的宽度改变而改变。

Html

<div class="container"></div>
<div class="operation">
    <div><label>Observer enabled:</label><input type="checkbox" checked></div>
    <div><label>Adjust width:</label><input type="range" value="600" min="300" max="1300"></div>
</div>
<script src="./index.js"></script>

Css

.container{
    width: 400px;
    height: 400px;
    color: #fff;
    line-height: 400px;
    text-align: center;
    background-color: red;
}

JavaScript

const checkbox = document.querySelector('input[type="checkbox"]');
const rangeSlider = document.querySelector('input[type="range"]');
const resizeObserverTarget = document.querySelector(".container");

const setElementWidth = (element, width) => {
  element.style.width = width + "px";
};

const resizeObserverCallbackHandler = () => {
  resizeObserverTarget.innerHTML = "元素宽度为:" + rangeSlider.value + "px";
};

const resizeObserverCallback = (entries) => {
  for (let entry of entries) {
    if (entry.contentBoxSize) {
      if (entry.contentBoxSize[0]) {
        resizeObserverCallbackHandler();
      } else {
        resizeObserverCallbackHandler();
      }
    }
  }
};

const resizeObserver = new ResizeObserver(resizeObserverCallback);
resizeObserver.observe(resizeObserverTarget);

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    resizeObserver.observe(resizeObserverTarget);
  } else {
    resizeObserver.unobserve(resizeObserverTarget);
  }
});
rangeSlider.addEventListener("input", () => {
  setElementWidth(resizeObserverTarget, rangeSlider.value);
});