简单的事件和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>
posted @ 2020-07-31 13:50  湫欢  阅读(35)  评论(0编辑  收藏