简单批量给div增加事件

最新推荐文章于 2023-06-06 16:01:16 发布

zuoluo11

最新推荐文章于 2023-06-06 16:01:16 发布

阅读量805

点赞数

分类专栏： javascript 文章标签： div批量加事件

本文链接：https://blog.csdn.net/zuoluo11/article/details/49647229

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication2.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1
        {
            background-color:darkgray;
            width:250px;
            height:50px;

        }
        #square
        {
            background-color:white;
            width:50px;
            height:50px;
            margin:100px;
        }
        #setDiv div
        {
            margin-top:10px;
        }
        #setDiv
        {
            
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var setStart = document.getElementById("setStart");
            var setDiv = document.getElementById("setDiv");
            var square = document.getElementById("square");
            var init = document.getElementById("init");
            var color = new Array(3);
            var width = new Array(3);
            var height = new Array(3);
            init.onclick = function () {
                square.style.backgroundColor = "white";
                square.style.width = "50px";
                square.style.height = "50px";
            }
            setStart.onclick = function () {
               
                if (setDiv.style.display == "block") {
                    setDiv.style.display = "none";
                }
                else
                {
                    setDiv.style.display = "block";
                }
            }
           
            for (var i = 1; i < 4; i++)
            {
                color[i] = document.getElementById("color" + i);
                width[i] = document.getElementById("width" + i);
                height[i] = document.getElementById("height"+i);
               
                color[i].onclick = function () {
                    square.style.backgroundColor = <strong><span style="color:#ff0000;">this.style.backgroundColor;</span></strong>
                }
                width[i].onclick = function () {
                    square.style.width = <strong><span style="color:#ff0000;">this.innerHTML+"px";</span></strong>
                }
                height[i].onclick = function () {
                    square.style.height =<strong><span style="color:#ff0000;"> this.innerHTML + "px";</span></strong>
                }
                
            }

            
           


        }

    </script>
</head>
<body>
  <div id="div1">
      <h1 id="setStart">点击我开始设置</h1>
  </div>
  <div id="square" style="border:1px solid black">

  </div>
  <div id="setDiv"  style="padding-left:20px;background-color:white;width:300px;height:300px;margin-right:auto;margin-left:auto;border:1px solid black">
      <div>
          <div style="width:50px;height:50px; float:left;text-align:center;vertical-align:central;line-height:50px" >颜色</div>
          <div id="color1" style="border:1px solid black;width:50px;height:50px;background-color:red;text-align:center;vertical-align:central;line-height:50px;float:left;margin-left:30px">红</div>
          <div id="color2" style="border:1px solid black;width:50px;height:50px;background-color:yellow;text-align:center;vertical-align:central;line-height:50px;float:left;margin-left:30px">黄</div>
          <div id="color3" style="border:1px solid black;width:50px;height:50px;background-color:blue;text-align:center;vertical-align:central;line-height:50px;float:left;margin-left:30px">蓝</div>
      </div>
      <br />
      <div>
          <div style="border:1px solid black;float:left;text-align:center;vertical-align:central;line-height:50px; width:33px"> 宽</div>
          <div id="width1" style="border:1px solid black;width:50px;height:50px;text-align:center;vertical-align:central;line-height:50px;float:left;margin-left:30px">100</div>
          <div id="width2"style="border:1px solid black;width:50px;height:50px;text-align:center;vertical-align:central;line-height:50px;float:left;margin-left:30px">200</div>
          <div id="width3"style="border:1px solid black;width:50px;height:50px;text-align:center;vertical-align:central;line-height:50px;float:left;margin-left:30px">300</div>
      </div>
      <br />
      <div>
          <div style="border:1px solid black;float:left;text-align:center;vertical-align:central;line-height:50px; width:33px"> 高</div>
          <div id="height1" style="border:1px solid black;width:50px;height:50px;text-align:center;vertical-align:central;line-height:50px;float:left;margin-left:30px">100</div>
          <div id="height2" style="border:1px solid black;width:50px;height:50px;text-align:center;vertical-align:central;line-height:50px;float:left;margin-left:30px">200</div>
          <div id="height3" style="border:1px solid black;width:50px;height:50px;text-align:center;vertical-align:central;line-height:50px;float:left;margin-left:30px">300</div>
      </div>
      <br />
      <div>
          <div id="init" style="border:1px solid black;width:50px;height:30px;float:left" >恢复</div>
      </div>
  </div>
</body>
</html>

在添加事件的时候，循环后，在onclick匿名方法中，无法使用变量i，使用时会访问到4，导致未定义无法绑定，可以使用this关键字，代表当前div

zuoluo11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单批量给div增加事件

#div1 { background-color:darkgray; width:250px; height:50px; } #square { background-color:white; width:50px
复制链接

扫一扫