【前端 HTML+CSS+JavaScript(JS)】DOM练习-左侧菜单栏点击收放带注释/总结

_小鹰

已于 2022-02-15 22:51:29 修改

阅读量193

点赞数 1

文章标签：前端 css html javascript

于 2022-02-15 22:26:41 首次发布

本文链接：https://blog.csdn.net/cc2855816075/article/details/122953387

版权

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业4-菜单栏收放</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				border: 0px solid;
			}
			#b-box{
				width: 99%;
				height: 755px;
				border: 1px solid #000000;
				margin: 5px 5px;
				position: relative;
			}
			#d1{
				width: 99%;
				height: 50px;
				border: 1px solid #000000;
				margin: 5px 5px;
			}
			#d2,#d3{
				display: inline-block;
				border: 1px solid #000000;
				margin: 5px 5px;
			}
			#d2{
				width: 14%;
				height: 680px;
				position: absolute;
			}
			#d3{
				width: 84%;
				height: 680px;
				position: absolute;
				margin-left: 15.4%;
			}
			#switch1{
				font-size: 50px;
				width: 50px;
				height: 70px;
				border: 1px solid;
				margin-left: 162px;
				cursor: pointer;
			}
			#switch2{
				font-size: 30px;
				width: 30px;
				height: 50px;
				border: 1px solid;
				cursor: pointer;
				margin-top: 270px;
				margin-left: 20px;
				display: none;
			}
		</style>
		<script src="utility.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<script type="text/javascript">
			function shrink(){
				$("d2").style.width = "50px";
				$("d3").style.marginLeft = "72px";
				$("d3").style.width = "1439px";
				$("switch1").style.display = "none";
				$("switch2").style.display = "block";
			}
			function expand(){
				$("d2").style.width = "14%";
				$("d3").style.width = "84%";
				$("d3").style.marginLeft = "15.4%";
				$("switch1").style.display = "block";
				$("switch2").style.display = "none";
			}
		</script>
		
		<div id="b-box">
			<div id='d1'>
				
			</div> 
			
			<div id='d2'>
				<input type="button" name="" id="switch1" value="<" onclick="shrink()"/>
				<input type="button" name="" id="switch2" value=">" onclick="expand()"/>
			</div>
			
			<div id='d3'>
				
			</div>
		</div>
	</body>
</html>

其中所用到的utility.js：

function $(id){
	return document.getElementById(id);
}
function l(a){
	console.log(a);
}

DOM练习文件：

https://download.csdn.net/download/cc2855816075/80848641

_小鹰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端 HTML+CSS+JavaScript(JS)】DOM练习-左侧菜单栏点击收放带注释/总结

效果：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业4-菜单栏收放</title> <style type="text/css"> *{ margin: 0px; padding: 0px; border: 0px solid; } #b-box{ width: 99%;
复制链接

扫一扫