jquery调整div元素

jquery的resize()事件,但它只是与窗口一起工作。

 jQuery(window).resize(function() { /* What ever */ }); 

这工作正常! 但是,当我想将事件添加到div元素不起作用。

例如

 jQuery('div').resize(function() { /* What ever */ }); 

我想在div元素的大小发生变化时开始callback。 我不想开始一个resizeable事件 – 只是一个事件来检查是否div元素的大小已经改变。

有没有解决scheme来做到这一点?

DIV不会触发resize事件,因此您将无法完全按照您所编写的内容进行操作,但是您可以查看监视DOM属性 。

如果你实际上正在使用可resize的东西,这是一个div的唯一方法来改变大小,那么你的大小调整插件可能会实现自己的callback。

我只是感兴趣的一个元素的宽度改变(我不关心高度),所以我创build了一个jQuery事件,正是这样做,使用一个不可见的iframe元素。

 $.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小提琴

 // 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)); 

那这个呢:

 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); 

顺便说一句,我build议你添加一个id到div,并将$(“div”)更改为$(“#yourid”),这将会更快,并且不会因以后添加其他div

今年发布的基本JavaScript和jQuery都有一个非常好的,易于使用的,轻量级的(使用原生浏览器事件进行检测)插件。 它performance完美:

https://github.com/sdecima/javascript-detect-element-resize

只有窗口支持是的,但你可以使用一个插件: http : //benalman.com/projects/jquery-resize-plugin/

对于谷歌地图集成,我正在寻找一种方法来检测div的大小已经改变。 由于谷歌地图总是需要适当的尺寸,例如宽度和高度,以正确渲染。

我提出的解决scheme是一个事件的代表团,在我的情况下是一个标签点击。 这当然可能是一个窗口大小调整,这个想法仍然是一样的:

 if (parent.is(':visible')) { w = parent.outerWidth(false); h = w * mapRatio /*9/16*/; this.map.css({ width: w, height: h }); } else { this.map.closest('.tab').one('click', function() { this.activate(); }.bind(this)); } 

this.map在这种情况下是我的地图div。 由于我的父母在加载时不可见,所以计算的宽度和高度是0或不匹配。 通过使用.bind(this)我可以将脚本执行( this.activate )委托给一个事件( click )。

现在我相信这同样适用于resize的事件。

 $(window).one('resize', function() { this.div.css({ /*whatever*/ }); }.bind(this)); 

希望它能帮助任何人!

只要尝试这个function(它可能不仅适用于div):

 function resized(elem, func = function(){}, args = []){ elem = jQuery(elem); func = func.bind(elem); var h = -1, w = -1; setInterval(function(){ if (elem.height() != h || elem.width() != w){ h = elem.height(); w = elem.width(); func.apply(null, args); } }, 100); } 

你可以像这样使用它

 resized(/*element*/ '.advs-columns-main > div > div', /*callback*/ function(a){ console.log(a); console.log(this); //for accessing the jQuery element you passed }, /*callback arguments in array*/ ['I\'m the first arg named "a"!']); 

更新:你也可以使用更多的进步观察者(它可以适用于任何对象,而不仅仅是DOM元素):

 function changed(elem, propsToBeChanged, func = function(){}, args = [], interval = 100){ func = func.bind(elem); var currentVal = {call: {}, std: {}}; $.each(propsToBeChanged, (property, needCall)=>{ needCall = needCall ? 'call' : 'std'; currentVal[needCall][property] = new Boolean(); // is a minimal and unique value, its equivalent comparsion with each other will always return false }); setInterval(function(){ $.each(propsToBeChanged, (property, needCall)=>{ try{ var currVal = needCall ? elem[property]() : elem[property]; } catch (e){ // elem[property] is not a function anymore var currVal = elem[property]; needCall = false; propsToBeChanged[property] = false; } needCall = needCall ? 'call' : 'std'; if (currVal !== currentVal[needCall][property]){ currentVal[needCall][property] = currVal; func.apply(null, args); } }); }, interval); } 

去尝试一下:

 var b = '2', a = {foo: 'bar', ext: ()=>{return b}}; changed(a, { // prop name || do eval like a function? foo: false, ext: true }, ()=>{console.log('changed')}) 

每当您直接更改b,a.foo或a.ext时,它都会logging“更改”