JavaScript-12(传参练习)
Posted 张锐0328
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript-12(传参练习)相关的知识,希望对你有一定的参考价值。
注意:
用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>
以上是关于JavaScript-12(传参练习)的主要内容,如果未能解决你的问题,请参考以下文章
spring练习,在Eclipse搭建的Spring开发环境中,使用set注入方式,实现对象的依赖关系,通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段