Web页面效果：网页换肤

最新推荐文章于 2022-08-06 11:11:46 发布

jasmyn518

最新推荐文章于 2022-08-06 11:11:46 发布

阅读量783

点赞数

分类专栏：笔记 HTML JavaScript 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/jasmyn518/article/details/122152521

版权

笔记同时被 3 个专栏收录

127 篇文章 3 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

点击超链接，切换相应的网页风格。
web页面效果
具体代码如下：
index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>网页换肤</title>
	<link id="myCss" href="orange.css" rel="stylesheet">
</head>
<body>
	<a href="#" onclick="change('orange')">[橘色经典]</a>
	<a href="#" onclick="change('gray')">[灰色畅想]</a>
	<script type="text/javascript">
		function writeCookie(csspath){
			var today=new Date();
			var expires=new Date();
			expires.setTime(today.getTime()+1000*60*60*24*30);//有效期为30天
			var str="cssPath="+cssPath+";expires="+expires.toGMTString()+";";
			document.cookie=str;
		}
		function readCookie(cookieName){
			var search=cookieName+"=";
			if(document.cookie.length>0){
				offset=document.cookie.indexOf(search);
				if(offset!=-1){
					offset+=search.length;
					end=document.cookie.indexOf(";",offset);
					if(end==-1){
						end=document.cookie.length;
						return unescape(document.cookie.substring(offset,end));
					}
				}
			}
		}
		function change(type){
			if(type=="orange"){
				document.getElementById("myCss").href="orange.css";
				writeCookie("orange.css");
			}
			if(type=="gray"){
				document.getElementById("myCss").href="gray.css";
				writeCookie("gray.css");
			}
		}
	</script>
</body>
</html>
部分代码参考《JavaWeb实例1200例》

orange.css

@charset "UTF-8";
body{
	background: orange;
}

gray.css

@charset "UTF-8";
body{
	background: gray;
}

jasmyn518

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web页面效果：网页换肤

点击超链接，切换相应的网页风格。具体代码如下：index.html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>网页换肤</title> <link id="myCss" href="orange.css" rel="stylesheet"></head><body> <a href="#" oncli
复制链接

扫一扫