jQuery有resize() - 事件，但它只适用于窗口。
jQuery(window).resize(function() { /* What ever */ });
这很好用！但是，当我想将事件添加到div元素时，它不起作用。
E.g。
jQuery('div').resize(function() { /* What ever */ });
我想在div元素的大小发生变化时开始回调。我不想开始一个可调整大小的事件 - 只是一个事件来检查div的大小 - 元素已经改变。
有没有解决办法呢？
答案 0 :(得分：31)
DIV不会触发resize事件，因此您无法完全按照您的编码进行操作，但您可以查看monitoring DOM properties。
如果你实际上正在使用像resizable一样的东西，这是div改变大小的唯一方法，那么你的resize插件可能会实现自己的回调。
答案 1 :(得分：27)
当元素的宽度发生变化时，我只对触发器感兴趣（我不关心高度），因此我使用不可见的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
答案 2 :(得分：15)
// 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));
答案 3 :(得分：6)
怎么样：
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);
BTW我建议你在div中添加一个id并将$（“div”）更改为$（“＃yourid”），它会更快，并且在以后添加其他div时不会中断< / p>
答案 4 :(得分：4)
我创建了jquery插件jquery.resize，如果支持，则使用resizeObserver或基于marcj/css-element-queries滚动事件的解决方案，没有setTimeout / setInterval。
你只使用
jQuery('div').on('resize', function() { /* What ever */ });
或作为缩放器插件
jQuery('div').resizer(function() { /* What ever */ });
我为jQuery Terminal创建了这个并提取到单独的repo和npm包中，但同时我切换到隐藏的iframe，因为如果元素在iframe中，我有调整大小的问题。我可以相应地更新插件。您可以查看iframe based resizer plugin in jQuery Terminal source code。
编辑：新版本使用iframe并调整其窗口对象的大小，因为当页面位于iframe内时，之前的解决方案无效。
答案 5 :(得分：3)
今年发布的基本JavaScript和jQuery都有一个非常好用，易于使用，轻量级（使用本机浏览器事件进行检测）的插件。它表现完美：
答案 6 :(得分：2)
仅支持窗口是，但您可以使用插件：http://benalman.com/projects/jquery-resize-plugin/
答案 7 :(得分：0)
对于谷歌地图集成，我一直在寻找一种方法来检测div何时发生变化。由于谷歌地图总是需要适当的尺寸，例如宽度和高度，以便正确呈现。
我想出的解决方案是一个事件的委托，在我的情况下是一个标签点击。当然，这可能是一个窗口调整大小，这个想法保持不变：
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）。
现在我确信这同样适用于调整大小事件。
$(window).one('resize', function() {
this.div.css({ /*whatever*/ });
}.bind(this));
希望它对任何人都有帮助！
答案 8 :(得分：0)
试试这个功能（它不仅适用于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')})
它将记录并更改＆＃39;每当你直接改变b，a.foo或a.ext时
答案 9 :(得分：0)
您可以根据屏幕尺寸更改文本，内容或属性： HTML：
<p class="change">Frequently Asked Questions (FAQ)</p>
<p class="change">Frequently Asked Questions </p>
Javascript：
<script>
const changeText = document.querySelector('.change');
function resize() {
if((window.innerWidth<500)&&(changeText.textContent="Frequently Asked Questions (FAQ)")){
changeText.textContent="FAQ";
} else {
changeText.textContent="Frequently Asked Questions (FAQ)";
}
}
window.onresize = resize;
</script>
答案 10 :(得分：0)
如果只想调整div本身的大小，则需要以CSS样式指定它。您需要添加溢出和调整大小属性。
下面是我的代码段
#div1 {
width: 90%;
height: 350px;
padding: 10px;
border: 1px solid #aaaaaa;
overflow: auto;
resize: both;
}
<div id="div1">
</div>