监听元素宽高变化resize

首先我们先了解js中resize功能只支持window对象
正常情况下我们队某一元素使用resize功能是无法监听到元素宽高变化的。

1.重构resize()

在已经引入jquery的情况下
js文件中增加以下代码

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

使用方法

然后就可以直接使用了

//obj为目标对象，function为响应函数
$(obj).resize(function(){});

监听元素宽高变化resize相关推荐

JS监听DOM宽高的变化
在 JS里面 resize 方法可以监听 window 窗口的大小变化,如果要监听某个Dom的变化话需要用到 MutationObserver 来去监听了,示例代码如下. <!DOCTYPE h ...
vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作
效果图如下所示 .html 今日热门今日热销 .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, ...
ios 监听数组个数的变化_iOS 监听数组的变化
这里用的是KVO的方式来实现的, 首先有一个 testArray 这个数组需要监听里面的数据变化 NSMutableArray *testArray; 然后给这个数组注册监听 testArray = ...
JavaScript 实时监听input 中值变化
JavaScript 实时监听input 中值变化在 <input> 标签中,添加属性 oninput ,oninput 事件在元素获得用户输入时发生. 当 <input> ...
js监听元素尺寸变化
上代码: /*** @description 监听元素尺寸变化* @author: hruomei* @update* @date: 2021-07-22 11:29:40*/export defau ...
js 监听dom属性的变化，如id，class
tinymce中的颜色选择器,选择后只有下划线变了颜色,UI要求字体也变色.下划线和上面的字母都是svg中的path,没有change之类的事件可以监听. <editor@onInit=&quo ...
页面宽高，窗口宽高，元素宽高，元素位置，页面滚动距离
注:以下内容只适用于chrome 页面宽高: document.body.clientWidth/Height(不包括margin) document.body.offsetWidth/Height( ...
vue动态获取元素距离页面顶部的高度_VUE如何实时监听元素距离顶部高度
VUE如何实时监听元素距离顶部高度发布时间:2020-07-30 09:09:43 来源:亿速云阅读:150 作者:小猪这篇文章主要讲解了VUE如何实时监听元素距离顶部高度,内容清晰明了,对此有 ...
jquery获取元素宽高
前言 jquery获取元素宽高 <!DOCTYPE html> <html lang="zh" > <head><meta charset ...

监听元素宽高变化resize

1.重构resize()

使用方法

监听元素宽高变化resize相关推荐

最新文章

热门文章