简单的事件和DOM操作

发布时间:2020-08-13 22:00:19发布者:Mr.Zhang阅读(484)

首先,定义五个按钮和一个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>




本文转自博客园,原文地址:https://www.cnblogs.com/szyi/p/13245815.html

自己做的一款记账小程序,请多多支持