注意：
用onclick="函数名（）”传参时，如果函数名外面用双引号包裹时，则里面传字符串用单引号包裹；若外面用单引号包裹时，里面用双引号包裹；否则会报错。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0 auto; padding: 0; } .kuang{ width: 900px; height: 100px; border: 1px solid gray; box-shadow: 0px 5px 25px gray; transition: 2s; margin-top: 15px; } .xiaokuang{ width: 65px; height: 25px; border-radius: 5px; border: 1px solid black; float: left; margin-left: 30px; text-align: center; margin-top: 10px; background-color: lightgoldenrodyellow; } .changkuang{ width: 200px; height: 25px; border-radius: 5px; border: 1px solid black; float: left; margin-left: 30px; text-align: center; margin-top: 10px; background-color: lightgoldenrodyellow; transition: 2s; } .xiaokuang:hover{ cursor: pointer; } .changkuang:hover{ cursor: pointer; } .honggaozhai{ width: 100px; height: 225px; border-radius: 5px; border: 1px solid black; float: left; margin-left: 30px; text-align: center; margin-top: 10px; background-color: red; } </style> </head> <body> <!--设置四个按钮，前三个每点一个改变一次大框的背景颜色，最后一个恢复原样--> <div class="kuang"> <div id=hanshu_1> 1、函数传参，一个参数</div> <div class="xiaokuang" onclick="bjcolor('yellow')"> 背景变黄 </div> <div class="xiaokuang" onclick="bjcolor('red')"> 背景变红 </div> <div class="xiaokuang" onclick="bjcolor('black')"> 背景变黑 </div> <div class="xiaokuang" onclick="bjcolor('white')"> 恢复原样 </div> </div> <!--设置四个按钮，前三个分别负责变宽，变背景，变窄，最后一个恢复原样--> <div class="kuang"> <div id=hanshu_2> 2、函数传参，两个参数</div> <div class="xiaokuang" onclick="lia('400px',' ',' ')"> 背景变窄 </div> <div class="xiaokuang" onclick="lia(' ','yellow',' ')"> 背景变黄 </div> <div class="xiaokuang" onclick="lia(' ',' ','200px')"> 背景变高 </div> <div class="xiaokuang" onclick="lia('900px','white','100px')"> 恢复原样 </div> </div> <!--读取text输入框中的文字并更改--> <div class="kuang"> <div id=hanshu_3> 3、函数传参，参数加变量</div> <div id="xiaopengyouzhuanyong" style="float: left;margin-top: 10px;"> <input type="text" name="xpy" id="" value="你拍一 我拍一" style="height: 25px;margin-left: 10px;"/> </div> <div class="xiaokuang" onclick="wz('两个小孩在装逼')"> 改变文字 </div> </div> <!--读取div的className，通过更改className的方式更改样式--> <div class="kuang"> <div id=hanshu_4> 4、修改样式，通过调取classname</div> <div class="changkuang" onclick="hgz()"> 变红 变高 变窄 </div> <div class="xiaokuang" onclick="yy()"> 恢复原样 </div> </div> </body> </html> <script type="text/javascript"> window.onload = function(){ } function bjcolor(aa){ document.getElementsByClassName("kuang")[0].style.backgroundColor = aa; } function lia(zhai,se,gao){ document.getElementsByClassName("kuang")[1].style.width = zhai; document.getElementsByClassName("kuang")[1].style.backgroundColor = se; document.getElementsByClassName("kuang")[1].style.height = gao; } function wz(bb){ document.getElementsByTagName("input")[0].value = bb; } function hgz(){ document.getElementsByClassName("changkuang")[0].className = "honggaozhai"; } function yy(){ document.getElementsByClassName("honggaozhai")[0].className = "changkuang"; } </script>