js div resize

博客提及了EleResize.js和index.html,可能与前端开发相关。EleResize.js或许用于处理元素相关操作,index.html是常见的网页文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

EleResize.js

/**
 * Created by taozh on 2017/5/6.
 * taozh1982@gmail.com
 */
var EleResize = {
	_handleResize: function(e) {
		var ele = e.target || e.srcElement;
		var trigger = ele.__resizeTrigger__;
		if(trigger) {
			var handlers = trigger.__z_resizeListeners;
			if(handlers) {
				var size = handlers.length;
				for(var i = 0; i < size; i++) {
					var h = handlers[i];
					var handler = h.handler;
					var context = h.context;
					handler.apply(context, [e]);
				}
			}
		}
	},
	_removeHandler: function(ele, handler, context) {
		var handlers = ele.__z_resizeListeners;
		if(handlers) {
			var size = handlers.length;
			for(var i = 0; i < size; i++) {
				var h = handlers[i];
				if(h.handler === handler && h.context === context) {
					handlers.splice(i, 1);
					return;
				}
			}
		}
	},
	_createResizeTrigger: function(ele) {
		var obj = document.createElement('object');
		obj.setAttribute('style',
			'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;');
		obj.onload = EleResize._handleObjectLoad;
		obj.type = 'text/html';
		ele.appendChild(obj);
		obj.data = 'about:blank';
		return obj;
	},
	_handleObjectLoad: function(evt) {
		this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
		this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize);
	}
};
if(document.attachEvent) { //ie9-10
	EleResize.on = function(ele, handler, context) {
		var handlers = ele.__z_resizeListeners;
		if(!handlers) {
			handlers = [];
			ele.__z_resizeListeners = handlers;
			ele.__resizeTrigger__ = ele;
			ele.attachEvent('onresize', EleResize._handleResize);
		}
		handlers.push({
			handler: handler,
			context: context
		});
	};
	EleResize.off = function(ele, handler, context) {
		var handlers = ele.__z_resizeListeners;
		if(handlers) {
			EleResize._removeHandler(ele, handler, context);
			if(handlers.length === 0) {
				ele.detachEvent('onresize', EleResize._handleResize);
				delete ele.__z_resizeListeners;
			}
		}
	}
} else {
	EleResize.on = function(ele, handler, context) {
		var handlers = ele.__z_resizeListeners;
		if(!handlers) {
			handlers = [];
			ele.__z_resizeListeners = handlers;

			if(getComputedStyle(ele, null).position === 'static') {
				ele.style.position = 'relative';
			}
			var obj = EleResize._createResizeTrigger(ele);
			ele.__resizeTrigger__ = obj;
			obj.__resizeElement__ = ele;
		}
		handlers.push({
			handler: handler,
			context: context
		});
	};
	EleResize.off = function(ele, handler, context) {
		var handlers = ele.__z_resizeListeners;
		if(handlers) {
			EleResize._removeHandler(ele, handler, context);
			if(handlers.length === 0) {
				var trigger = ele.__resizeTrigger__;
				if(trigger) {
					trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize);
					ele.removeChild(trigger);
					delete ele.__resizeTrigger__;
				}
				delete ele.__z_resizeListeners;
			}
		}
	}
}

index.html

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Resize</title>
		<script src="./EleResize.js"></script>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}
			
			#resizeDiv {
				width: 60%;
				height: 60%;
				border: 1px solid red;
				margin: 20px;
			}
			
			button {
				margin: 20px 20px 0;
			}
		</style>
	</head>

	<body>
		<button onclick="addListener()">addListener</button>
		<button onclick="removeListener()">removeListener</button>
		<button onclick="resize()">resize</button>
		<div id="resizeDiv"></div>
		<script>
			var resizeDiv = document.getElementById('resizeDiv');

			function resize() {
				resizeDiv.style.width = "200px";
			}
			var listener = function() {
				console.log("resize");
			};

			function addListener() {
				EleResize.on(resizeDiv, listener);
			}

			function removeListener() {
				EleResize.off(resizeDiv, listener)
			}
		</script>
	</body>

</html>

 

### 前端 `div` 监听 `resize` 事件 由于标准的 `resize` 事件仅适用于窗口对象,对于特定的 DOM 元素如 `<div>` 并不支持此事件。为了实现对单个 `div` 的尺寸变化监听,可以采用几种不同的策略。 #### 使用 ResizeObserver API 现代浏览器提供了 `ResizeObserver` 接口来观察目标元素的尺寸更改。这允许开发者监控任何元素的内容矩形的变化情况,并相应地作出反应[^4]。 ```javascript const elementToWatch = document.querySelector('#myDiv'); // 创建一个新的 ResizeObserver 实例并定义回调函数 const resizeObserver = new ResizeObserver((entries) => { for (let entry of entries) { console.log('Element resized:', entry.contentRect); } }); // 开始观察指定的目标节点 resizeObserver.observe(elementToWatch); // 如果不再需要观察,则可以通过下面的方法停止观察 // resizeObserver.unobserve(elementToWatch); ``` 这种方法的优势在于它不需要依赖于定时器轮询或其他间接手段就能精确捕捉到元素的实际大小改变。 #### 老版本兼容方案 如果考虑到较旧版浏览器的支持问题,可能无法使用 `ResizeObserver` 。此时可考虑其他替代方式,比如通过检测属性变动或布局更新触发自定义逻辑: 一种常见的做法是在每次页面重绘时检查感兴趣元素的新尺寸并与之前记录下来的值对比;当发现差异时即认为发生了调整行为。不过这种方式效率较低且容易造成性能瓶颈,在实际应用中应谨慎选用。 另一种思路是利用 MutationObserver 来监视 DOM 结构上的变更,虽然这不是直接针对尺寸变化的设计初衷,但在某些场景下也能起到一定作用。 需要注意的是,以上提到的老版本兼容方案并不是最佳实践,推荐尽可能使用最新的 Web 标准特性如 `ResizeObserver` ,除非确实存在跨平台兼容性的严格要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值