JS——网页换肤

最新推荐文章于 2024-09-23 12:03:20 发布

舒眉

最新推荐文章于 2024-09-23 12:03:20 发布

阅读量1.8k

点赞数 1

分类专栏：前端技术文章标签：网页换肤

本文链接：https://blog.csdn.net/sunshine_0880/article/details/81043831

版权

前端技术专栏收录该内容

38 篇文章 5 订阅

订阅专栏

此处的网页换肤的效果通过改变link的href属性，来改变页面的CSS样式，达到还付的效果。

效果如下：

· 标签内设置事件，且鼠标点击事件onclick = ""

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link id="link1" rel="stylesheet" href="皮肤1.css">
</head>
<body>
	<form action="">

		<input type="button" id="btn1" value="皮肤1" οnclick="document.getElementById('link1').href = '皮肤1.css';" >
		<input type="button" id="btn2" value="皮肤2" οnclick="document.getElementById('link1').href = '皮肤2.css';">
		<div class="content">
			<h1>haha</h1>
			<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
		</div>
	</form>
</body>	
</html>

皮肤1.css

form {
	width: 800px;
	height: 500px;
	background-color: skyblue;
}
 input {
 	margin-top: 80px;
 	margin-left: 10px;
 }
.content {
	width: 780px;
	height: 350px;
	margin: 0 auto;
	background-color: #fff;
}

皮肤2.css

form {
	width: 800px;
	height: 500px;
	background-color: skyblue;
	background: url(time.jpg);
}
 input {
 	margin-top: 80px;
 	margin-left: 10px;
 	background-color: #2000ff;
 	border: 2px solid blue;
 	color: #fff;
 }
.content {
	width: 780px;
	height: 350px;
	margin: 0 auto;
	background-color: #fff;
}

_________END__________