调整div元素的大小
调整div元素的大小
提问于 2012-04-10 18:04:01
jQuery有resize() - event，但它只适用于window。
jQuery(window).resize(function() { /* What ever */ });这可以很好地工作！但是，当我想要将事件添加到div元素时，它不起作用。
例如。
jQuery('div').resize(function() { /* What ever */ });当div-element的大小发生变化时，我想启动一个回调。我不想启动一个可调整大小的事件--只是一个检查div元素的大小是否改变的事件。
有什么解决方案可以解决这个问题吗？
回答 10
Stack Overflow用户
发布于 2012-04-10 18:08:10
DIV不会触发resize事件，因此您将无法执行您编写的代码，但是您可以查看monitoring DOM properties。
如果你实际使用的是可调整大小的东西，并且这是div改变大小的唯一方法，那么你的resize插件可能会实现它自己的回调。
Stack Overflow用户
发布于 2014-09-28 01:07:04
我只对元素宽度改变时的触发器感兴趣(我不关心高度)，所以我使用不可见的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;
}你可以在这里看到它的实际效果widthChanged fiddle
Stack Overflow用户
发布于 2015-06-11 00:08:31
// 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));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10086693
复制相关文章
相似问题
腾讯云开发者
