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完美：
只有窗口支持是的，但你可以使用一个插件： 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“更改”
