Question

我试图找出一种方法来检测何时调整div元素的大小，并调整与其相同的类中的其他几个相关元素的大小。我了解到onresize事件仅适用于身体，而不适用于个别元素。

我确实发现ResizeObserver并且有这个例子 - ＆gt; How to detect DIV's dimension changed?

<html>
Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me</textarea><br>
</html>
<script>
function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)
</script>

正如您所看到的那样，观察者通过名称和回调传递了对象，但我试图找出将回调传递给元素的方法。上面特定元素名称（文本框）的例子在函数中，但是我想将它作为输入变量传递。类似......

new ResizeObserver(outputsize(self)).observe(self)

我觉得这应该很容易，但我很想念它。

Answer 1

查看documentation页面，我找到了答案。

在定义resize观察者时，我定义了与元素的交互。

var ro=new ResizeObserver( entrie => {
        for (let entry of entrie){
                outputsize(entry.target);
        }
});

然后我可以为我想看的每个元素设置一个观察者。

ro.observe(textbox);
ro.observe(t2);

所以一起工作看起来像这样（这个程序调整底部窗口的大小以匹配顶部的调整大小）。

<html>
Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
ID:<output id="id"></output><br>
ID2:<output id="id2"></output><br>
<textarea id="textbox" class='tim'>Resize me</textarea><br>
w:<output id="w2">0</output><br>
h:<output id="h2">0</output><br>
<textarea id="t2" class='tom'>I'm #2</textarea><br>
<textarea id="t3" class='tom tim'>I'm gonna change</textarea><br>
</html>
<script>

function outputsize(ele) {
        //console.log(ele);
        id2.value=textbox;
        width.value = ele.offsetWidth;
        height.value = ele.offsetHeight;
        var cl=document.getElementsByClassName(ele.classList[0]);
        console.log(cl);
        console.log(ele.classList);
        for (x=0;x<cl.length;x++){
                cl[x].style.width=ele.offsetWidth;
                console.log(ele.id+" "+ele.offsetWidth);
                console.log(cl[x].id+" "+cl[x].offsetWidth);
        }
}

var ro=new ResizeObserver( entrie => {
        for (let entry of entrie){
                outputsize(entry.target);
        }
});

ro.observe(textbox);
ro.observe(t2);
</script>

Answer 2

当我正在寻找相同问题的解决方案时，您的问题就出现了。

这就是我最终要做的。

你不能这样做

const element = document.querySelector(".foo");
new ResizeObserver(outputsize(element)).observe(element)

相反，您应该这样做

const element = document.querySelector(".foo");
new ResizeObserver(() => {
  outputsize(element);
}).observe(element);

将元素传递给新的ResizeObserver

2 个答案: