给元素添加resize事件

(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事件,这个事件在window上面触发,那么如何给div元素增加resize事件,监听div的高度或宽度的改变呢?
某位大神用jquery实现的方法,这样就可以 $('div').resize(fucntion(){ .. })直接使用了;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在React中,我们可以使用class组件或函数组件将监听resize事件添加到div元素上。下面是使用class组件的示例: 1. 首先,在class组件的构造函数中初始化一个状态变量,用于保存div的宽度和高度: ```javascript class MyComponent extends React.Component { constructor(props) { super(props); this.state = { width: 0, height: 0, }; } ... } ``` 2. 接下来,在组件挂载完成后,我们可以通过ref获取到div元素的引用,并添加resize事件监听器: ```javascript class MyComponent extends React.Component { constructor(props) { super(props); this.state = { width: 0, height: 0, }; this.divRef = React.createRef(); } componentDidMount() { // 获取div元素引用 const div = this.divRef.current; // 添加resize事件监听器 window.addEventListener('resize', this.handleResize); // 更新div的初始宽度和高度 this.setState({ width: div.offsetWidth, height: div.offsetHeight, }); } componentWillUnmount() { // 移除resize事件监听器 window.removeEventListener('resize', this.handleResize); } handleResize = () => { // 获取更新后的div宽度和高度 const div = this.divRef.current; const width = div.offsetWidth; const height = div.offsetHeight; // 更新状态 this.setState({ width, height, }); } render() { return ( <div ref={this.divRef}> {/* 其他组件内容 */} </div> ); } } ``` 通过以上步骤,我们成功地将resize事件监听添加到了div元素上,并且在窗口尺寸改变时更新了div的宽度和高度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值