2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > js实现监听dom元素的宽高变化

js实现监听dom元素的宽高变化

时间:2022-07-20 21:28:29

相关推荐

js实现监听dom元素的宽高变化

1. 默认情况下jquery的resize

$(window).resize(function () {console.log(111);});//只会响应浏览器的窗口大小变化

如果要resize想用dom元素的宽高变化,则需要引入jquery的另外一个插件

(下载地址:/jquery-resize/1.1/jquery.ba-resize.min.js),内容如下:

/** jQuery resize event - v1.1 - 3/14/* /projects/jquery-resize-plugin/* * Copyright (c) "Cowboy" Ben Alman* Dual licensed under the MIT and GPL licenses.* /about/license/*/(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);

引入这个插件后,resize将会响应dom元素的宽高变化,如下:当id为content的元素宽高变化后将触发回调

$("#content").resize(function () {console.log(111);});

有时候我们不仅仅只是需要监听宽高的变化,还需要监听其他属性,已经子节点增加删除等,请查看我的另一篇文章:

/D_bel/article/details/97159844

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。