【fgm.cc练习1-2】切换css文件、闭包运用

最新推荐文章于 2021-05-05 17:13:25 发布

denguing

最新推荐文章于 2021-05-05 17:13:25 发布

阅读量272

点赞数

分类专栏： fgm.cc 文章标签：前端 html css javascript

本文链接：https://blog.csdn.net/DGT4720/article/details/103006631

版权

fgm.cc 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文是一个关于前端开发的练习，重点在于如何通过JavaScript实现CSS文件的切换，并探讨了闭包的概念。作者分享了自己的代码，包括HTML结构、不同样式的CSS文件，以及引用了一个对闭包理解的外部链接。作者诚挚邀请读者帮助解答代码中的疑问。

摘要由CSDN通过智能技术生成

练习网址：http://www.fgm.cc/learn/lesson1/02.html
里面的注释是我的一些疑惑或者问题，希望朋友们能指点迷津，感谢你们。
我的代码：
HTML

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>网页换肤</title>
		<script src="2_pageColor.js"></script>
		<link rel="stylesheet" href="2_pageColor2.css" id="style">
	</head>
	<body>
		<!-- 这里换成了li,而不用input,暂时不知为什么，反正input改不了太小，好像有bug -->
		<ul id="choose"><li id="first"></li><li id="second"></li><li id="third"></li></ul>
		<div id="nav">
			<ul>
				<li>新闻</li>
				<li>娱乐</li>
				<li>体育</li>
				<li>电影</li>
				<li>音乐</li>
				<li>旅游</li>
			</ul>
		</div>
	</body>
</html>```

CSS1：2_pageColor1.css

html,body {
	width: 100%;
	height: 100%;
	background: #FFDDDD;
}
li {
	list-style-type: none;
	float: left;
}
#choose {
	position: relative;
	left: 400px;
}
#choose li {
	width: 7px;
	height:7px;
	margin: 0 5px;
}
#second {
	background: rgb(0,128,0);
	border: 4px solid rgb(0,128,0);
}
#first {
	background: white;
	border: 4px solid red;
}
#third {
	background: black;
	border: 4px solid black;
}
#nav {
	position: relative;
	left: 330px;
	top: 30px;
}
#nav li {
	color: white;
	border: 1px solid white;
	padding: 1px 25px;
	background-color: red;
}
#nav li:hover {
	text-decoration: underline;
	cursor: pointer;
}

CSS2:2_pageColor2.css

html,body {
	width: 100%;
	height: 100%;
	background: rgb(163,197,168);
}
li {
	list-style-type: none;
	float: left;
}
#choose {
	position: relative;
	left: 400px;
}
#choose li {
	width: 7px;
	height:7px;
	margin: 0 5px;
}
#first {
	background: red;
	border: 4px solid red;
}
#second {
	background: white;
	border: 4px solid rgb(0,128,0);
}
#third {
	background: black;
	border: 4px solid black;
}
#nav {
	position: relative;
	left: 330px;
	top: 30px;
}
#nav li {
	color: white;
	border: 1px solid white;
	padding: 1px 25px;
	background-color: rgb(0,128,0);
}
#nav li:hover {
	text-decoration: underline;
	cursor: pointer;
}

CSS3:2_pageColor3.css

html,body {
	width: 100%;
	height: 100%;
	background: #CCCCCC;
}
li {
	list-style-type: none;
	float: left;
}
#choose {
	position: relative;
	left: 400px;
}
#choose li {
	width: 7px;
	height:7px;
	margin: 0 5px;
}
#first {
	background: red;
	border: 4px solid red;
}
#third {
	background: white;	
	border: 4px solid black;
}
#second {
	background: rgb(0,128,0);
	border: 4px solid rgb(0,128,0);
}
#nav {
	position: relative;
	left: 330px;
	top: 30px;
}
#nav li {
	color: white;
	border: 1px solid white;
	padding: 1px 25px;
	background-color: black;
}
#nav li:hover {
	text-decoration: underline;
	cursor: pointer;
}

javaScript
这里的闭包概念有一位朋友写得挺好的，解释得挺好（我能看懂好吧。。）https://www.jianshu.com/p/102e44f35b3b

window.onload = function() {
	var style = document.getElementById("style");
	var choose = document.getElementById("choose").childNodes;
	// alert(choose.length);
	// 这里还是那个问题，li之间有空格，长度是7不是3
	for(var i=0; i<choose.length; i++){
		choose[i].onclick = (function(n){
			return function() {
				style.href = "2_pageColor"+(n+1)+".css";
			}
		})(i);
	}
}

我太菜了！