js div resize

最新推荐文章于 2023-05-12 12:58:02 发布

曹振华

最新推荐文章于 2023-05-12 12:58:02 发布

阅读量904

点赞数 1

分类专栏： javascript 文章标签： js div resize

javascript 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

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>

曹振华

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js div resize

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...
复制链接

扫一扫