<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
div{
width: 1000px;
background-color: lightcyan;
margin: auto;
box-shadow: 10px 10px 5px lavender;
transition: 2s;
}
#xs{
width: 70px;
position: absolute;
left:220px;
top: 300px;
z-index: -1;
background-color: lightgrey;
font-size: 10px;
}
.one{
background-color: black;
height: 100px;
}
</style>
<body>
<div id="ys1">
1、函数传参 一个函数
<br />
<button onclick="clor1(0)">颜色变黄</button>
<button onclick="clor1(1)">颜色变红</button>
<button onclick="clor1(2)">颜色变黑</button>
<button onclick="clor1(3)">恢复原样</button>
<br />
</div>
<br />
<br />
<br />
<div id="ys2">
2、函数传参 两个函数
<br />
<br />
<button onclick="clor2(0,0)">背景变窄</button>
<button onclick="clor2(1,1)">背景变黄</button>
<button onclick="clor2(2,2)">颜色变高</button>
<button onclick="clor2(3,3)">恢复原样</button>
</div>
<br />
<br />
<br />
<div id="bl">
3、函数传参 参数加变量
<br />
<br />
<input type="text" name="wb" value="你拍一 我拍一"/>
<button onclick="aa()">改变文字</button>
<button >添加标题属性</button>
</div>
<br />
<br />
<br />
<div class="bb">
4、修改样式、通过调用classname <br />
<button onclick="gao()">变高变红</button>
<button onclick="hui()">恢复原样</button>
</div>
</body>
</html>
<script type="text/javascript">
function clor1(a){
var ys = document.getElementById("ys1");
if(a==0){
ys.style.backgroundColor = "yellow";
}
else if (a==1){
ys.style.backgroundColor = "red";
}
else if (a==2){
ys.style.backgroundColor = "black";
}
else if (a==3){
ys.style.backgroundColor = "lightcyan";
}
}
function clor2(a,b){
var ys2 = document.getElementById("ys2");
if(a==0&&b==0){
ys2.style.width = "500px";
}
else if(a==1&b==1){
ys2.style.backgroundColor = "yellow";
}
else if(a==2&b==2){
ys2.style.height = "100px";
}
else if(a==3&b==3){
ys2.style.width = "1000px";
ys2.style.backgroundColor = 'lightcyan';
ys2.style.height = "70px";
}
}
function aa(){
var wb = document.getElementsByName("wb")[0];
wb.value = "两个小孩坐灰机";
}
function gao(){
var g = document.getElementsByClassName("bb")[0];
g.style.height = "200px";
g.style.backgroundColor = "red";
}
function hui(){
var h = document.getElementsByClassName("bb")[0];
/*console.log(h.className)*/
h.style.backgroundColor = "lightcyan";
h.style.height = "48px";
}
</script>
