<!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>