<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: auto; padding: 0 px; } #a1 { width: 1000px; height: 200px; transition: 2s; background-color: white; box-shadow: 8px 8px 8px gray; color: gray; } #a11 { width: 1000px; height: 50px; } #a12 { width: 1000px; height: 50px; } #a121 { width: 100px; height: 50px; float: left; margin-left: 50px; background-color: gainsboro; text-align: center; line-height: 50px; } #a121:hover { cursor: pointer; } #a122 { width: 100px; height: 50px; float: left; background-color: gainsboro; margin-left: 10px; text-align: center; line-height: 50px; } #a122:hover { cursor: pointer; } #a123 { width: 100px; height: 50px; float: left; background-color: gainsboro; margin-left: 10px; text-align: center; line-height: 50px; } #a123:hover { cursor: pointer; } #a124 { width: 100px; height: 50px; float: left; background-color: gainsboro; margin-left: 10px; text-align: center; line-height: 50px; } #a124:hover { cursor: pointer; } #a13 { width: 1000px; height: 95px; } #a2 { width: 1000px; height: 200px; transition: 2s; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 20px; overflow: hidden; } #a21 { width: 1000px; height: 50px; } #a22 { width: 1000px; height: 50px; } #a221 { width: 100px; height: 50px; float: left; margin-left: 50px; background-color: gainsboro; text-align: center; line-height: 50px; } #a221:hover { cursor: pointer; } #a222 { width: 100px; height: 50px; float: left; background-color: gainsboro; margin-left: 10px; text-align: center; line-height: 50px; } #a222:hover { cursor: pointer; } #a223 { width: 100px; height: 50px; float: left; background-color: gainsboro; margin-left: 10px; text-align: center; line-height: 50px; } #a223:hover { cursor: pointer; } #a224 { width: 100px; height: 50px; float: left; background-color: gainsboro; margin-left: 10px; text-align: center; line-height: 50px; } #a224:hover { cursor: pointer; } #a23 { width: 1000px; height: 95px; } #a3 { width: 1000px; height: 200px; transition: 2s; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 20px; overflow: hidden; } #a31 { width: 1000px; height: 50px; } #a32 { width: 1000px; height: 50px; } #a321 { width: 200px; height: 40px; float: left; margin-left: 50px; background-color: gainsboro; text-align: center; line-height: 50px; } #a321:hover { cursor: pointer; } #a322 { width: 100px; height: 50px; float: left; background-color: gainsboro; margin-left: 10px; text-align: center; line-height: 50px; } #a322:hover { cursor: pointer; } #a323 { width: 200px; height: 50px; float: left; background-color: gainsboro; margin-left: 10px; text-align: center; line-height: 50px; } #a323:hover { cursor: pointer; } #a33 { width: 1000px; height: 95px; } .a4{ width: 1000px; height: 200px; transition: 2s; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 20px; } .a41{ width: 1000px; height: 100px; } .a42{ width: 1000px; height: 98px; } .a421 { width: 200px; height: 50px; float: left; margin-top: 20px; background-color: gainsboro; margin-left: 50px; text-align: center; line-height: 50px; } .a421:hover { cursor: pointer; } .a422 { width: 100px; height: 50px; float: left; margin-top: 20px; background-color: gainsboro; margin-left: 20px; text-align: center; line-height: 50px; } .a422:hover { cursor: pointer; } .a5{ width: 800px; height: 400px; transition: 2s; background-color: red; box-shadow: 8px 8px 8px gray; margin-top: 20px; overflow: hidden; } </style> </head> <body> <div id="a1"> <div id="a11"> 1、函数传参，一个参数 </div> <div id="a12"> <div id="a121" onclick="b1(1)"> 背景变黄 </div> <div id="a122" onclick="b1(2)"> 背景变红 </div> <div id="a123" onclick="b1(3)"> 背景变黑 </div> <div id="a124" onclick="b1(4)"> 回复原样 </div> </div> <div id="a13"> 定义参数为color，变量div </div> </div> <div id="a2"> <div id="a21"> 1、函数传参，二个参数 </div> <div id="a22"> <div id="a221" onclick="b2(1)"> 背景变窄 </div> <div id="a222" onclick="b2(2)"> 背景变黄 </div> <div id="a223" onclick="b2(3)"> 背景变高 </div> <div id="a224" onclick="b2(4)"> 回复原样 </div> </div> <div id="a23"> 定义函数的参数为name和value </div> </div> <div id="a3"> <div id="a31"> 1、函数传参，参数加变量 </div> <div id="a32"> <input type="" name="a321" id="a321" value="你拍一我拍一" /> <div id="a322" onclick="b3(1)"> 改变文字 </div> <div id="a323" onclick="b3(2)"> 添加title属性（鼠标经过） </div> </div> <div id="a33"> 定义函数的参数为name </div> </div> <div class="a4"> <div class="a41"> 4、修改样式、通过调取className </div> <div class="a42"> <div class="a421" onclick="b4(1)"> 变红 变高 变窄 </div> <div class="a422" onclick="b4(2)"> 回复原样 </div> </div> </div> </body> </html> <script type="text/javascript"> function b1(t) { if(t == 1){ var a121 = document.getElementById("a1") a1.style.background = "yellow" } else if(t == 2){ var a122 = document.getElementById("a1") a1.style.background = "red" } else if(t == 3){ var a123 = document.getElementById("a1") a1.style.background = "black" } else{ var a124 = document.getElementById("a1") a1.style.background = "white" } } function b2(q) { if(q == 1){ var a221 = document.getElementById("a2") a2.style.width = "800px" } else if(q == 2){ var a222 = document.getElementById("a2") a2.style.background = "yellow" } else if(q == 3){ var a223 = document.getElementById("a2") a2.style.height = "300px" } else{ var a224 = document.getElementById("a2") a2.style.height = "200px" a2.style.width = "1000px" a2.style.background = "white" } } function b3(p) { if(p == 1){ var a322 = document.getElementById("a321") a321.value = "两个小孩坐飞机" } else if(p == 2){ var a323 = document.getElementById("a321") a321.style.title = "两个小孩坐飞机" } } function b4(w){ if(w == 1){ var a4 = document.getElementsByClassName("a4")[0]; a4.className = "a5"; } else if(w == 2){ var a5 = document.getElementsByClassName("a5")[0]; a5.className = "a4"; } } </script>