簡單的事件和DOM操做

首先，定義五個按鈕和一個div，div用來展現對應的效果變化

 　<button id="btn1">變寬</button>

    <button id="btn2">變高</button>

    <button id="btn3">變色</button>

    <button id="btn4">隱藏</button>

    <button id="btn5">重置</button>

    <div id="mydiv"></div>

 

對應的事件代碼以下：

<script>

  var btn = document.querySelectorAll("button");

  var mydiv = document.getElementById("#mydiv");

  $(btn[0]).click(function () {

    $("#mydiv").css({ width: "300px" });

  });

  $(btn[1]).click(function () {

    $("#mydiv").css({ height: "300px" });

  });

  $(btn[2]).click(function () {

    $("#mydiv").css({ "background-color": "red" });

  });

  $(btn[3]).click(function () {

    $("#mydiv").hide();

  });

  $(btn[4]).click(function () {

    $("#mydiv").css({width: "200px",

        height: "200px",

        "background-color": "black",

        "margin-left": "43%",

        "margin-top": "10px"});

    $("#mydiv").show();

  });

</script>