二、函數傳參

時間  2019-12-10
標籤 函數 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二、函數傳參</title>
    <link href="base.css">
    <style>
        li{
            padding-bottom: 50px;
        }
        .l{
            border: 1px solid #ccc;
            width:1200px;
            height:60px;
        }
        .lll{
            background-color: red;
            width:800px;
            height:120px;
        }

    </style>
</head>
<body>
<ol>
    <!--一、函數傳參，一個參數 -->
    <div id="bianse">
    <li>函數傳參，一個參數
        <input type="button" value="背景變黃" onclick="change('yellow')">
        <input type="button" value="背景變紅" onclick="change('red')">
        <input type="button" value="背景變黑" onclick="change('black')">
        <input type="button" value="恢復原樣" onclick="change('white')">
        <p>定義函數的參數爲color，變量adiv的樣式調用參數color，onclick事件把背景顏色的值傳給參數color。</p>
    </li>
    </div>

    <!--二、函數傳參，兩個參數-->
    <div id="bianhua" style="margin-bottom: 50px;height: 100px;width: 1200px;border: 1px solid #ccc">
        <li>函數傳參，兩個參數
            <input type="button" value="背景變窄" onclick="change1('width','600px')">
            <input type="button" value="背景變黃" onclick="change1('backgroundColor','yellow')">
            <input type="button" value="背景變高" onclick="change1('height','200px')">
            <input type="button" value="恢復原樣" onclick="alert('sorry,我還沒學')">
            <p>定義函數的參數爲name和value，變量bdiv的樣式的屬性名用參數name代替，屬性值用參數value代替，onclick事件把樣式的屬性名和值分別傳給參數name和value。</p>
        </li>
    </div>

    <!--三、函數傳參，參數加變量-->
    <div>
        <li>函數傳參，參數加變量
            <input type="text" value="你拍一 我拍一" id="bwenzi">
            <input type="button" value="改變文字" onclick="change11('兩個小孩兒坐灰機')">
            <input type="button" value="添加title屬性">
            <p>定義函數的參數爲name，定義變量a爲參數name，兩個onclick事件分別綁定標籤屬性調用參數的值。(暫時不知道爲何要把參數定義成變量，可是這樣也行的通。)</p>
        </li>
    </div>

    <!--四、修改樣式，經過調取className-->
    <div id="ll" class="l">
        <li>修改樣式，經過調取className
            <input type="button" value="變紅 變高 變窄" onclick="bian()">
            <input type="button" value="恢復原樣" onclick="alert('sorry,我還沒學')">
        </li>
    </div>


</ol>

<script>
    /*一、函數傳參，一個參數*/
    function change(color) {
      var adiv=document.getElementById("bianse");
        adiv.style.backgroundColor=color;
    }
    /*一、函數傳參，一個參數end*/

    /*二、函數傳參，兩個參數*/
    function change1(name,value) {
        var bdiv=document.getElementById("bianhua");
        console.log(bdiv.style);
        bdiv.style[name]=value;
    }
    /*二、函數傳參，兩個參數end*/

    /*三、函數傳參，參數加變量*/
    function change11(name) {
        var a=document.getElementById("bwenzi");
        a.value=name;
    }
    /*三、函數傳參，參數加變量end*/

    /*四、修改樣式，經過調取className*/
    function bian() {
        var a=document.getElementById("ll").className="lll";
    }
    /*四、修改樣式，經過調取className end*/


</script>

</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程