观察元素的大小变化
Observe size change of element
这不是重复的!我对其他答案的结果不满意。如果您仍然认为它是重复的,请在您认为重复的原因之前对其进行评论!
我必须观察元素的大小变化。我试图通过在 offsetWidth
属性 上创建一个 setter 来做到这一点,如下所示:
const div = document.querySelector("div");
div.addEventListener("resize", console.log);
div.addEventListener("click", () => console.log(div.offsetWidth));
let width = div.offsetWidth;
Object.defineProperty(div, "offsetWidth", {
get: () => width,
set: val => {
width = val;
div.dispatchEvent(new Event("resize"));
}
});
document.querySelector("button").onclick = () => div.style.width = "200px";
div {
background-color: #f00;
width: 300px;
height: 300px;
}
<div></div>
<button>
Set size
</button>
单击红色框以记录大小。然后按下按钮。什么都没发生。如果您再次单击该框,它仍会显示旧尺寸。为什么这不起作用?
Microsoft 的 Internet Explorer 在所有 HTML 元素上支持 onresize
。在所有其他浏览器中,onresize
仅在 window
对象上可用。 https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize
如果您想在所有浏览器的 div 上显示 onresize
,请检查:
http://marcj.github.io/css-element-queries/
这个库有一个 class ResizeSensor
可用于 resize
检测。
您是否考虑过使用 ResizeObserver?
// get references to the elements we care about
const div = document.querySelector('.demo');
const button = document.querySelector('button');
// wire the button to resize the div
button.addEventListener('click', () => div.style.width = `${Math.random() * 100}%`);
// set up an observer that just logs the new width
const observer = new ResizeObserver(entries => {
const e = entries[0]; // should be only one
console.log(e.contentRect.width);
})
// start listening for size changes
observer.observe(div);
.demo { /* not really relevant. just making it visible. */
background: skyblue;
min-height: 50px;
}
<button>Change Size</button>
<div class="demo">Demo</div>
这不是重复的!我对其他答案的结果不满意。如果您仍然认为它是重复的,请在您认为重复的原因之前对其进行评论!
我必须观察元素的大小变化。我试图通过在 offsetWidth
属性 上创建一个 setter 来做到这一点,如下所示:
const div = document.querySelector("div");
div.addEventListener("resize", console.log);
div.addEventListener("click", () => console.log(div.offsetWidth));
let width = div.offsetWidth;
Object.defineProperty(div, "offsetWidth", {
get: () => width,
set: val => {
width = val;
div.dispatchEvent(new Event("resize"));
}
});
document.querySelector("button").onclick = () => div.style.width = "200px";
div {
background-color: #f00;
width: 300px;
height: 300px;
}
<div></div>
<button>
Set size
</button>
单击红色框以记录大小。然后按下按钮。什么都没发生。如果您再次单击该框,它仍会显示旧尺寸。为什么这不起作用?
Microsoft 的 Internet Explorer 在所有 HTML 元素上支持 onresize
。在所有其他浏览器中,onresize
仅在 window
对象上可用。 https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize
如果您想在所有浏览器的 div 上显示 onresize
,请检查:
http://marcj.github.io/css-element-queries/
这个库有一个 class ResizeSensor
可用于 resize
检测。
您是否考虑过使用 ResizeObserver?
// get references to the elements we care about
const div = document.querySelector('.demo');
const button = document.querySelector('button');
// wire the button to resize the div
button.addEventListener('click', () => div.style.width = `${Math.random() * 100}%`);
// set up an observer that just logs the new width
const observer = new ResizeObserver(entries => {
const e = entries[0]; // should be only one
console.log(e.contentRect.width);
})
// start listening for size changes
observer.observe(div);
.demo { /* not really relevant. just making it visible. */
background: skyblue;
min-height: 50px;
}
<button>Change Size</button>
<div class="demo">Demo</div>