涉及js或jq中的$().width(), clientWidth, offsetWidth各种尺寸问题的一个将页面分隔成左右两部分可任意调整尺寸的DEMO

最新推荐文章于 2021-08-14 16:45:10 发布

sosososolong

最新推荐文章于 2021-08-14 16:45:10 发布

阅读量709

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/sosososolong/article/details/90373913

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

假如有这样的一个需求, 一个页面分成左右两个部分, 左右的中间再放一个宽度为10px"分隔条", 两部分的尺寸可以通过鼠标拖动中间的"分割条"来任意调整, 用js实现这个动态效果, 会操作到关于元素的很多尺寸属性, 这里是完整的代码和详细的注释, 通过代码可以了解到实现这个动态效果的思路, 通过注释以及自己的实验, 可以了解到元素的各种尺寸的具体含义, 如$().width(), eleObj.clientWidth, eleObj.offsetWidth, eleObj.style.width, 高度相关属性也是一样

总览:

eleObj.style.width = '1000px'; //用js给元素设置宽度, 这个跟在css中设置的width一样, 如果该元素设置了box-sizing: border-box; 那么这个尺寸包括border和padding的宽度，否则都不包括, 另外注意这个width是用来设置的不是用来取值, 它的值必须是以'px'结尾的字符串
$(eleObj).width() //用jQuery获取/设置元素的尺寸, 不包括边框, 包括滚动条, 不包括padding
eleObj.clientWidth //不包括边框,包括滚动条, 包括padding
eleObj.offsetWidth //包括元素的边框,padding,滚动条

<!DOCTYPE html>
<html>
<head>
	<title>页面分隔</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			border: none;
		}
		.mainContext{
			border: 10px solid orange;
			height: 60px;
			box-sizing: border-box;
			overflow: auto;
			padding: 5px;			
		}
		.topContext{
			height: 30px;			
			background-color: #eee;
			/*overflow: auto;		*/
		}
		.leftContext{
			box-sizing: border-box; /*包括padding宽度 也 包括border的宽度*/				
			width: 200px;
			overflow: auto;						
			border: 10px solid yellow;
			padding: 15px;			
		}
		.middleBar{
			cursor: e-resize;
			background-color: green;
			height: 100%;
			width: 10px;			
		}
		.content{
			display: flex;
			flex-direction: row;
			margin-top: 10px;
			padding: 15px;
		}
		.rightContext{
			box-sizing: border-box;
			background-color: #eee;
			width: 500px;
		}
	</style>
</head>
<body>	
	<div class="mainContext">		
		<div class="topContext">
			jflkajflafjlajflajflajflajfjflkajflafjlajflajflajflajfjflkajflafjlajflajflajflajfjflkajflafjlajflajflajflajfjflkajflafjlajflajflajflajfjflkajflafjlajflajflajflajfjflkajflafjlajflajflajflajfjflkajflafjlajflajflajflajfjflkajflafjlajflajflajflajfjflkajflafjlajflajflajflajfjflkajflafjlajflajflajflajfjflfj
		</div>
		<div class="content">
			<div class="leftContext">
			<div style="background-color: red;">12</div>			
			<ul>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>
				<li>fslkfj</li>										
			</ul>
			</div>
			<div class="middleBar">sf</div>
			<div class="rightContext">there is a table!</div>
		</div>
	</div>	
	<script src="jquery.min.js"></script>
	<script>
		var leftContext = $(".leftContext")[0],
		mainContext = $(".mainContext")[0],
		content = $(".content")[0],
		topContext = $(".topContext")[0],
		middleBar = $(".middleBar")[0],
		rightContext = $(".rightContext")[0],
		allWidth = document.documentElement.clientWidth,
		allHeight = document.documentElement.clientHeight;

		function bindResize(el) {
			var leftContextStyle = leftContext.style,
			x = 0;
			$(el).mousedown(function (e) {				
				//clientX中除去 其他leftContext的所占的宽度后剩下的宽度 固定不变
				x = e.clientX - leftContext.offsetWidth;				                
                                //这里的setCapture(),和releaseCapture()方法成对使用,是为了锁定/解锁元素的事件, 防止鼠标滑动过快或者其他原因导致在滑动的过程中,onmousemove事件失效, 现在浏览器基本不会出现这个问题,所以这里可以将setCapture和releaseCapture的判断和方法都去掉
				el.setCapture ? (el.setCapture(), el.onmousemove = function (ev) { mouseMove(ev || event) }, el.onmouseup = mouseUp) : ($(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp));

				//阻止事件的冒泡（阻止浏览器的默认行为【阻止当前元素的父元素也绑定此事件】）
				e.preventDefault();				
			});		

			function mouseMove(e) {
				//用elementObj.style.width设置尺寸的时候，如果box-sizing: border-box; 那么这个尺寸包括border和padding的宽度，否则都不包括
		        leftContextStyle.width = e.clientX - x + 'px';				        		        		       
		        resize();
		        
		    }
		    function mouseUp() {
		        el.releaseCapture ? (el.releaseCapture(), el.onmousemove = el.onmouseup = null) : ($(document).unbind("mousemove", mouseMove));
		    }
		}
		function resize() {
			//用jQuery获取/设置元素的尺寸, **不包括边框,不包括padding** 包括滚动条
			//$('.mainContext').height(document.documentElement.clientHeight); clientHeight是不包括边框部分的尺寸(包括滚动条,包括padding),若计算总尺寸还要加上边框的尺寸(或使用offsetHeight属性获取总的尺寸)

			//设置元素总尺寸: 这里box-sizing: border-box; 用此方式设置尺寸 表示该元素的总尺寸(包括边框,滚动条)
			mainContext.style.height = document.documentElement.clientHeight + 'px';		

			//设置“右边”的宽,clientWidth包括padding
			//$(".rightContext")[0].style.width = content.clientWidth - leftContext.offsetWidth - middleBar.offsetWidth + 'px';
			//$(content).width()不包括padding
			$(".rightContext")[0].style.width = $(content).width() - leftContext.offsetWidth - middleBar.offsetWidth + 'px';
			
			//设置“左边”，“分割条”，“右边”的容器高
			content.style.height = $(".mainContext").height() + 'px';

			//设置分隔条的高
			middleBar.style.height = $(content).height() + 'px';
		}
		
		$(function(){
			resize();
			bindResize($(".middleBar")[0]);			
		});
	</script>
</body>
</html>

sosososolong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
涉及js或jq中的$().width(), clientWidth, offsetWidth各种尺寸问题的一个将页面分隔成左右两部分可任意调整尺寸的DEMO

假如有这样的一个需求, 一个页面分成左右两个部分, 左右的中间再放一个宽度为10px"分隔条", 两部分的尺寸可以通过鼠标拖动中间的"分割条"来任意调整, 用js实现这个动态效果, 会操作到关于元素的很多尺寸属性, 这里是完整的代码和详细的注释, 通过代码可以了解到实现这个动态效果的思路, 通过注释以及自己的实验, 可以了解到元素的各种尺寸的具体含义, 如$().width(), eleObj.c...
复制链接

扫一扫