Javascript 有没有办法注意到,何时<;td>;改变尺寸?

Javascript 有没有办法注意到,何时<;td>;改变尺寸?,javascript,css,html-table,Javascript,Css,Html Table,我通过CSSresize制作了一个带有单元格的html表格,单元格的宽度可以调整。我在CSS中对的设置是: td { resize: horizontal; overflow: auto; width: 35px; min-width: 35px; } 现在我想知道,当用户改变宽度时,是否可以注意到。所以,在用户更改后,我可以做一些事情。当用户通过CSSresize更改宽度时,是否发生事件 编辑: 为了希望减少一些混乱,我将给出更多关于我最终目标的细节 我试图实

我通过CSS
resize
制作了一个带有单元格的html表格,单元格的宽度可以调整。我在CSS中对
的设置是:

td {
    resize: horizontal;
    overflow: auto;
    width: 35px;
    min-width: 35px;
}
现在我想知道,当用户改变宽度时,是否可以注意到。所以,在用户更改后,我可以做一些事情。当用户通过CSS
resize
更改宽度时,是否发生事件

编辑: 为了希望减少一些混乱,我将给出更多关于我最终目标的细节

我试图实现的最终目标是一个具有固定表头、可滚动表体和列的表,这些表具有可调整的宽度(表头和表体同步)

到目前为止,我已经分别实现了一个具有固定头部和可滚动体的表和一个具有可调整宽度列的表,但没有合并到一个表中


因此,现在我试图找到一种方法来注意头部的表格单元格何时调整大小,以便我可以调整同一列中主体单元格的宽度(使用JavaScript)。

您可以使用JavaScript onresize事件,如下所示:

window.addEventListener('resize',()=>{
document.getElementById('foo').style.color='red';
}) ;
调整我的大小
有解决此问题的方法,也有不支持此方法的浏览器的方法

const td=document.querySelector('.right');
常量ro=新的调整大小的观察者((条目,观察者)=>{
for(条目的常量输入){
const{left,top,width,height}=entry.contentRect;
log('Element:',entry.target);
log(`Element的大小:${width}px${height}px`);
log(`Element的填充:${top}px;${left}px`);
}
});
ro.观察(td);
const leftElem=document.querySelector('.left');
设置间隔(()=>{
leftElem.style.width=`${10+Date.now()*0.001%50 | 0}px`;
}, 100);
表格{
宽度:90%;
高度:100px;
}
.左{
背景:红色;
}
.对{
背景:蓝色;
}

在我的评论中,一个类似的问题指向了我。它帮助我找到了一个可行的解决办法

要创建已更改的事件,请执行以下操作:

$.event.special.widthChanged = {
    remove: function () {
        $(this).children('iframe.width-changed').remove();
    },
    add: function () {
        var elm = $(this);
        var iframe = elm.children('iframe.width-changed');
        if (!iframe.length) {
            iframe = $('<iframe/>').addClass('width-changed').prependTo(this);
        }
        var oldWidth = elm.width();
        function elmResized() {
            var width = elm.width();
            if (oldWidth != width) {
                elm.trigger('widthChanged', [width, oldWidth]);
                oldWidth = width;
            }
        }

        var timer = 0;
        var ielm = iframe[0];
        (ielm.contentWindow || ielm).onresize = function () {
            clearTimeout(timer);
            timer = setTimeout(elmResized, 1);
        };
    }
}

只有通过JSI,我猜您在td上重置了display,或者将tr设置为flex父级,以允许在td元素上溢出:auto。在这里观看调整大小事件的目的是什么?是否也要调整整个列的大小。。。只是想知道为什么tdelement@TemaniAfif如何通过JS?到目前为止,我还没有找到JS的解决方案。@G-Cyr我想知道,当宽度发生变化时,我可以将不同元素的宽度调整为相同的值。我理解这一点,但它似乎奇怪地应用于一个td,其中表布局不允许溢出显示滚动
cell
+你的CSS不允许调整大小:(你可能因为不好的原因使用了一个表……不确定它是否最好,也不确定它是否防弹;)IE或firefox用户呢?测试包括下面的js答案也许整个事情/方法都需要重新思考:)我以前试过<代码>重新调整大小
仅在调整浏览器窗口大小时发生。这并没有发生。通过用户将表格单元格拉开或推到一起,可以调整其大小。窗户保持不变。
$('#id').on('widthChanged', function () {
    // Do what you want, when width changed
});