我们想做一个效果,就是 当点击button ,会更改背景色,
思路是这样的,
- 两个 css文件定义了样式,
- 在html 文件里, 设置三个box 和一个button , button 设置onclick 事件
- 在script里, 写两个方法 ,用于更改link 样式的 href 并绑定到 button 上
示例代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>背景色</title>
<link rel="stylesheet" type="text/css" id="btn1" >
<script type="text/javascript">
function btn1(){
document.getElementById("btn1").href="1.css";
}
function btn2(){
document.getElementById("btn1").href="2.css";
}
</script>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<input type="button" value="buton 1" onclick="btn1()"></input>
<input type="button" value="buton 2" onclick="btn2()"></input>
</body>
</html>
两个css 文件的内容
css1 :
.box1{
background-color:blue;
width:200px;
height:100px;
}
.box2{
background-color:red;
width:200px;
height:100px;
}
body{
background-color:orange;
}
css2
.box1{
background-color:#000;
width:200px;
height:100px;
margin:100px auto;
}
.box2{
background-color:yellow;
width:200px;
height:100px;
margin:100px auto;
}
body{
background-color:pink;
}