当<td>改变大小时，有什么方法可以注意到吗？
当<td>改变大小时，有什么方法可以注意到吗？
提问于 2018-08-05 10:54:03
我通过CSS resize制作了一个带有单元格的html表，该单元格具有可调整大小的宽度。我在CSS中的<td>设置如下：
td {
resize: horizontal;
overflow: auto;
width: 35px;
min-width: 35px;
}现在我想知道，是否可以注意到，用户何时更改宽度。所以，在用户更改后，我可以做一些事情。当用户通过CSS resize更改宽度时，是否存在事件？
编辑：希望减少一些混乱，我将给出关于我的最终目标的更多细节。
我试图实现的最终目标是一个具有固定表头、可滚动表体和列的表，它们具有可调整大小的宽度(表头和表体同步)。
到目前为止，我已经分别实现了一个具有固定头和可滚动体的表和一个具有可调整大小的宽度列的表，但没有组合在一个表中。
所以，现在我试图找到一种注意的方法，当头部的一个表单元格被调整大小时，我可以在同一列中调整身体细胞的宽度(使用JavaScript)。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-09-28 06:00:23
在评论中，我从一个类似的问题中被指向这个答案。它帮助我找到了一个可行的解决方案。
要创建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
});Stack Overflow用户
发布于 2018-08-05 10:59:15
您可以使用javascript onresize事件，如下所示：
window.addEventListener('resize', () => {
document.getElementById('foo').style.color = 'red';
}) ;<span id="foo">Resize me</span>
Stack Overflow用户
发布于 2018-08-06 01:25:55
有API接口来解决这个问题，对于那些还不支持它的浏览器也有聚脂填充。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51693641
复制相关文章
相似问题
腾讯云开发者
