当 <td> 改变大小时，有没有办法注意到？答案

【问题标题】：Is there a way to notice, when <td> changes size?当 <td> 改变大小时，有没有办法注意到？
【发布时间】：2019-01-12 14:06:17
【问题描述】：

我通过 CSS resize 制作了一个带有可调整宽度的单元格的 html 表格。我在 CSS 中为 <td> 设置的是：

td {
    resize: horizontal;
    overflow: auto;
    width: 35px;
    min-width: 35px;
}

现在我想知道，如果可以注意到用户何时更改宽度。所以，在用户更改它之后，我可以做一些事情。当用户通过CSSresize改变宽度时，是否有事件发生？

编辑：为了希望减少一些混乱，我将提供更多关于我的最终目标的细节。

我尝试实现的最终目标是一个具有固定表头、可滚动表体和列的表，它们具有可调整大小的宽度（表头和表体同步）。

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

所以，现在我试图找到一种方法来注意，当头部的表格单元格被调整大小时，我可以调整同一列中正文单元格的宽度（使用 JavaScript）。

【问题讨论】：

只能通过JS
我猜你确实在 td 上重置了显示或将 tr 设置为 flex 父级以允许在 td 元素上溢出：自动。在这里观看调整大小事件的目的是什么？是否还要调整整个列的大小？ ...只是想知道为什么 td 元素
@TemaniAfif 又如何通过 JS？到目前为止，我也没有找到 JS 的解决方案。
@G-Cyr 我想知道，当宽度发生变化时，我可以将不同元素的宽度调整为相同的值。
我明白这一点，但是应用于表格布局不允许溢出显示滚动的 td 似乎很奇怪。 <table><tr><td>cell</td></tr></table> + 您的 CSS 不允许调整大小：（您可能出于不好的原因使用表格...不确定它是否处于最佳状态，并且肯定不是防弹的；） IE 或 firefox 用户呢？测试，包括下面的 js 答案codepen.io/anon/pen/qyyrov 也许整个事情/方法是重新思考:)

标签： javascript css html-table

【解决方案1】：

您可以使用 javascript onresize 事件，如下所示：

window.addEventListener('resize', () => {
    document.getElementById('foo').style.color = 'red';
}) ;

&lt;span id="foo"&gt;Resize me&lt;/span&gt;

【讨论】：

我以前试过。 onresize 仅在调整浏览器窗口大小时发生。那没有发生。表格单元格通过用户将其拉开或推到一起来调整大小。窗口保持不变。

【解决方案2】：

ResizeObserver API 可以解决此问题，a polyfill 用于尚不支持它的浏览器。

const td = document.querySelector('.right');
const ro = new ResizeObserver((entries, observer) => {
    for (const entry of entries) {
        const {left, top, width, height} = entry.contentRect;

        console.log('Element:', entry.target);
        console.log(`Element's size: ${ width }px x ${ height }px`);
        console.log(`Element's paddings: ${ top }px ; ${ left }px`);
    }
});

ro.observe(td);

const leftElem = document.querySelector('.left');
setInterval(() => {
  leftElem.style.width = `${10 + Date.now() * 0.001 % 50 | 0}px`;
}, 100);

table {
  width: 90%;
  height: 100px;
}
.left {
  background: red;
}
.right {
  background: blue;
}

<script src="https://cdn.rawgit.com/que-etc/resize-observer-polyfill/a3ae98bc/dist/ResizeObserver.global.js"></script>
<table>
  <tr>
    <td class="left"></td>
    <td class="right"></td>
  </tr>
</table>

【讨论】：

【解决方案3】：

在 cmets 中，我从一个类似的问题中被指向 this answer。它帮助我找到了可行的解决方案。

创建一个 widthChanged 事件：

$.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);
        };
    }
}

并使用事件：

$('#id').on('widthChanged', function () {
    // Do what you want, when width changed
});

【讨论】：