利用浮动+margin实现 左右布局 并用js实现可拖动分隔条  并用cookies记住宽度

代码:

<style>
body{margin:0px;padding:0px;}
.body{height:100%}
.left{
	height:100%;
	background-color:whitesmoke;
	width: 300px;
	float: left;
}
.fenge{
	height:100%;
	width: 10px;
	background-color:#F0F0F0;
	float: left;
	cursor:col-resize;
	border-left:1px solid #FFFFFF;
	border-right:1px solid #828790;	
}
.right{
	height:100%;
	background-color:whitesmoke;
	margin-left:310px;
}
</style>

<div class="body">
	<div class="left"></div>
	<div class="fenge"></div>
	<div class="right">asd</div>
</div>	


<script>
	//定义设置cookies和取cookies的函数
	function getCookieByName(name){for(item of document.cookie.split(';')){if(item.trim().substr(0,name.length+1)==name+"="){return item.trim().substr(name.length+1);}}return "";}
	function setCookie(name,value,days=30){var d = new Date();d.setTime(d.getTime()+(days*24*60*60*1000));var expires = "expires="+d.toGMTString();document.cookie = name+"="+value+"; "+expires;}
	//定义事件函数
	function drag(e){
		document.selection ? document.selection.empty() : window.getSelection().removeAllRanges();
		left.style.width = (e.pageX - bar.offsetWidth / 2) + 'px';
		right.style.marginLeft=(e.pageX - bar.offsetWidth / 2)+10+"px"
	}
	//获取 左右和分割条三个元素
	var left = document.querySelector('.left');
	var right = document.querySelector('.right');
	var bar = document.querySelector('.fenge');

	document.querySelector(".fenge").addEventListener("mousedown",function(){//鼠标被按下
		document.addEventListener('mousemove',drag); //给document添加鼠标移动事件
	})
	document.querySelector(".fenge").addEventListener("mouseup",function(){//鼠标被松开
		document.removeEventListener('mousemove', drag); //给document解绑鼠标移动事件
		setCookie("leftwidth",left.style.width.replaceAll("px",""));//使用cookie记录拖动后的宽度

	})

	//如果cookies存在 就读取cookies记录的宽度
	leftwidth=getCookieByName('leftwidth');
	if(leftwidth>0){
		left.style.width = leftwidth + 'px';
		right.style.marginLeft=Number(leftwidth)+10+"px"
	}

</script>


相关推荐

javascript原生js实现htmlcheckbox复选框按shift多选/全选/反选 取被勾选的id

纯原生JavaScript代码 无需任何库整理后 可以直接拿来用的代码<input type='checkbox' name='cateid[]'> <

htmlselect option原生javascript按照value值 按照文本 选择指定选项

function select_value(id,value){//按照option的值来选择 selectdom=document.getElementById(id); option=sele

原生js,原生javascript写的开关按钮

<style> td,table{border:1px solid #323841;} </style> <form method="get" act

Xmlhttprequest原生javascriptajax 发送GEt请求 post请求

get请求function zhankai(id){/*函数:展开某个分类*/ var httpRequest = new XMLHttpRequest () ; httpRequest.open

style对象全部属性

fontFamilyfontStylefontVariantfontWeightfontSizefontcolorbackgroundbackgroundColorbackgroundImagebac

javascript parseint()函数用法 - 字符串到整数

定义和用法parseInt() 函数可解析一个字符串,并返回一个整数。当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。当忽略参数 ra

javascript设置网页 cookies和取cookies

//取cookies function getCookieByName(name){ for(item of document.cookie.split(';')){ if(it

javascript变量声明之:let的使用 for循环中 varlet的区别

在for循环中 var 和 let的区别<script> //var方式的循环 for (var i=0; i<3; i++){ //要循环执行的代码 } console.log

javascript 解析json解析 遍历

代码:obj=JSON.parse('{"id":"8","home":"beijing","uid&

javascript取元素高度 宽度 水平位置 垂直位置

包括边框element.offsetHeight 返回元素的高度。 (包括边框)element.offsetWidth 返回元素的宽度。 element.offsetLeft 返回元素的水平