jQuery有resize()事件，但它只适用于窗口。
jQuery(window).resize(function() { /* What ever */ });
jQuery('div').resize(function() { /* What ever */ });
我想在一个div元素的大小改变时启动回调函数，我不想启动可调整大小的事件，只是想要一个事件来检查div元素的大小是否已更改。
有没有解决方案可以实现这个功能？
我只对元素宽度的变化感兴趣（不关心高度），因此我创建了一个使用不可见iframe元素的jQuery事件，以便触发这种情况。
$.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, 20);
};
}
}
需要以下的css：
iframe.width-changed {
width: 100%;
display: block;
border: 0;
height: 0;
margin: 0;
}
var ss = document.createElement('style');
ss.type = "text/css";
ss.innerHTML = "iframe.width-changed {width: 100%;display: block;border: 0;height: 0;margin: 0;}";
document.body.appendChild(ss); - runfaj// this is a Jquery plugin function that fires an event when the size of an element is changed
// usage: $().sizeChanged(function(){})
(function ($) {
$.fn.sizeChanged = function (handleFunction) {
var element = this;
var lastWidth = element.width();
var lastHeight = element.height();
setInterval(function () {
if (lastWidth === element.width()&&lastHeight === element.height())
return;
if (typeof (handleFunction) == 'function') {
handleFunction({ width: lastWidth, height: lastHeight },
{ width: element.width(), height: element.height() });
lastWidth = element.width();
lastHeight = element.height();
}
}, 100);
return element;
};
}(jQuery));
jQuery('div').on('resize', function() { /* What ever */ });
jQuery('div').resizer(function() { /* What ever */ });
今年发布了一款非常好用、易于使用、轻量级（使用本地浏览器事件进行检测）的插件，适用于基本的JavaScript和jQuery。它的性能表现非常完美：
现在有一个Resize Observer可用。
您可以像这样使用它：
const resizeObserver = new ResizeObserver((entries) => {
entries.forEach(console.log);
})
resizeObserver.observe(document.getElementById("ExampleElement"));
divH = divW = 0;
jQuery(document).ready(function(){
divW = jQuery("div").width();
divH = jQuery("div").height();
});
function checkResize(){
var w = jQuery("div").width();
var h = jQuery("div").height();
if (w != divW || h != divH) {
/*what ever*/
divH = h;
divW = w;
}
}
jQuery(window).resize(checkResize);
var timer = setInterval(checkResize, 1000);
顺便提一下，建议给这个div添加一个id，并将$("div")改为$("#yourid")，这样会更快，而且当您添加其他div时也不会出错。
$(window).resize 监听浏览器窗口的物理调整，例如拖动右下角。无论是否使用 overflow:hidden，都没有任何 DOM 事件会触发此事件。这个答案并没有解决你的问题。最好是在计时器中运行此代码，而不是附加到可能永远不会被触发的随机事件侦听器上。如果您可以使用 DOM 属性监视并回退到计时器（或在 div 大小可能更改的位置手动引发某些事件），那就更好了。 - David Hedlund仅支持Windows，但您可以使用插件：http://benalman.com/projects/jquery-resize-plugin/
document.addEventListener('transitionend', function(e) {
if ($(e.target).is("div")) {
$("div").text("width: "+$("div").width());
}
});
$("div").css({"width":"150px"});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 100px;transition-delay: 0.000000001s;">width: 100</div> <script>
var move = function(e) {
if ((e.w && e.w !== e.offsetWidth) || (e.h && e.h !== e.offsetHeight)) {
new Function(e.getAttribute('onresize')).call(e);
}
e.w = e.offsetWidth;
e.h = e.offsetHeight;
}
var resize = function() {
console.log('Resized')
}
</script>
<style>
.resizable {
resize: both;
overflow: auto;
width: 200px;
border: 1px solid black;
padding: 20px;
}
</style>
<div class='resizable' onresize="resize(this)" onmousemove="move(this)">
Pure vanilla implementation
</div>