JavaScript---网页换肤
学了一阵的前端了,复制粘贴复制粘贴的用vue写了一些小项目,回过头来发现还是得好好学习巩固下JavaScript。目前状态很不好呀,感觉自己什么都不会的感觉,七七八八自学各种东西,现在,脑瓜中混乱的很,但是也不能因此放弃吧。
谈谈入门“网页换肤”
整体思路:设置按钮,点击不同按钮切换皮肤风格,主要是更换css样式。
知识点:
<dt>标签用于创建定义列表中的一项(即一个术语)。
<dt>标签是与<dl>和<dd>联合使用的。<dl>用于创建定义列表,<dd>用于描述列表中的项
关键:获取css样式引入的link标签,设置其href属性:
<link id="link1" href="css1.css" rel="stylesheet" type="text/css" />
<input id="btn1" type="button" value="皮肤1" onclick="document.getElementById('link1').href='css1.css';" />
<input id="btn2" type="button" value="皮肤2" onclick="document.getElementById('link1').href='css2.css';" />
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link id="link1" href="css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<dl id="message">
<form>
<dt>
<strong>可以换肤的提交框:</strong>
<input id="btn1" type="button" value="皮肤1"
onclick="document.getElementById('link1').href='css1.css';" />
<input id="btn2" type="button" value="皮肤2"
onclick="document.getElementById('link1').href='css2.css';" />
</dt>
<dd>输入姓名:<input class="text" type="text" /></dd>
<dd>输入密码:<input class="text" type="password" /></dd>
<dd>请您留言:<textarea></textarea></dd>
<dd class="center"><input class="btn" type="submit" value="提交" /></dd>
</form>
</dl>
</body>
</html>
css1.html
body { margin-top: 40px; background: url(bg1.jpg) no-repeat center center; }
dl { width: 400px; border: 2px solid #ccc; background: #FFFFCC; padding: 20px; margin: 0 auto; filter: alpha(opacity: 70); opacity: 0.7; }
dt { font-size: 18px; color: #009933; border-bottom: 1px solid #ccc; padding-left: 10px; padding-bottom: 10px; margin-bottom: 20px; }
dd { margin-left: 0; padding-bottom: 10px; font-size: 14px; padding-left: 10px; }
.text { width: 300px; height: 30px; line-height: 30px; }
textarea { width: 300px; height: 120px; overflow: auto; }
.btn { width: 120px; height: 40px; }
.center { text-align: center; }
css2.html
body { background: url(bg2.jpg) no-repeat;
background-size: cover; margin-top: 80px; }
dl { width: 479px;
border: 4px solid #fff;
background: #c8e4a9; padding: 20px; margin: 0 auto; filter: alpha(opacity: 90); opacity: 0.9; }
dt { font-size: 18px; color: #fff; border-bottom: 1px solid #ccc; padding-left: 10px; padding-bottom: 10px; margin-bottom: 20px; }
dd { margin-left: 0; padding-bottom: 10px; font-size: 14px; padding-left: 10px; color: #fff; }
.text { width: 382px; height: 30px; line-height: 30px; font-weight: bold; font-size: 14px; font-family: arial; }
textarea { width: 382px; height: 120px; overflow: auto;font-weight: bold; font-size: 14px; font-family: arial; }
.btn { width: 120px; height: 40px; }
.center { text-align: center; }