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（传参练习）

相关文章
