问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么分别改变用JS创建出来的元素的样式？

头像
习泽涛
    1943352
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {height: 150px; width: 150px; border: 1px solid #000; margin: 5px;}
    </style>
</head>
<body>
    <button>new div</button>
</body>
<script>
    var body = document.querySelector("body");
    var btn = document.querySelector("button"); // 获取body和按钮
    btn.onclick = function(){
        div = document.createElement("div");
        button1 = document.createElement("button");
        button2 = document.createElement("button"); // 创建div和两个按钮
        button1.innerHTML = "change With";
        button2.innerHTML = "change Height"; // 设置两个按钮的内容
        body.appendChild(div);
        body.appendChild(button1);
        body.appendChild(button2); //把div和两个按钮插入进文档
        // code...
        // 我想点击按钮改变div相应的样式...
    }
</script>
</html>

    点击new div的按钮可以创建出来一个div和两个按钮；
    我想点击按钮就可以改变相应的div样式。
    例：
    点击第一组changeWith和changeHeight按钮，就改变第一个div的宽高。

    而且同时有多个div存在的情况下，按钮的功能不冲突。

    这个应该怎么写？
    或者说思路是怎么样的？

    前端javascript
    阅读 4k
    3 个回答
    得票最新
    头像
    dongzhe3917875
      1.5k2210
      ✓ 已被采纳

      这种情况可以使用面向对象的思想去管理，每一组div button1 button2 都看成一个Button对象
      将操作行为封装在对象里面。每次点击按钮都创建一个对象就可以了

      function Button(div, button1, button2) {
      this.div = div;
      this.button1 = button1;
      this.button2 = button2;
      this.init();
  }
  Button.prototype.init = function() {
      var _this = this
      this.button2.onclick = function() {
          _this.changeHeight(100)
      }
      this.button1.onclick = function() {
          _this.changeWidth(200)
      }
  }
  Button.prototype.changeHeight = function(height) {
      console.log(height)
      this.div.style.height = height + 'px'
  }
  Button.prototype.changeWidth = function(width) {
      this.div.style.width = width + 'px'
  }

      在这个地方创建对象

      body.appendChild(button2); //把div和两个按钮插入进文档
      new Button(div, button1, button2)
      // code...
      // 我想点击按钮改变div相应的样式...
      头像
      toBeTheLight
        16.6k41634

        给按钮加自定义属性，给div加类名或者id类似于这样

        ...
 let nth = 0;
    btn.onclick = function(){
        div = document.createElement("div");
        div.className = 'div'+nth;//加标示
        button1 = document.createElement("button");
        button2 = document.createElement("button");// 创建div和两个按钮
        button1.innerHTML = "change With";
        button2.innerHTML = "change Height"; // 设置两个按钮的内容
        button1.setAttribute('data-nth','div'+nth);//加相同标示
        button2.setAttribute('data-nth','div'+nth);//加相同标示
        //把div和两个按钮插入进文档
        nth++;
        // code...
        // 我想点击按钮改变div相应的样式...
        改变的时候就读取按钮上的data-nth属性，查找对应的div进行操作
    }

        你也可以通过其他方式加标示
        //也可以将div存在button的一个属性上

        button1.target = div;
button2.target = div;
button1.onclick = function(){console.log(this.target)};
//不过这么存的多了可能挺占内存的
        头像
        Shayqi
          1726

          另一个更简单的方式，定义一个数字，每次点击new div时，调用一个函数跟随num值增加，实现你要的功能，希望有帮到你

          var body = document.querySelector("body");
    var btn = document.querySelector("button"); // 获取body和按钮
    var num=0;
    btn.onclick = function(){
        div = document.createElement("div");
        div.className='div'+num;
        button1 = document.createElement("button");
        button1.className='button'+num;
        button2 = document.createElement("button"); // 创建div和两个按钮
        button2.className='button'+num;
        button1.innerHTML = "change With";
        button2.innerHTML = "change Height"; // 设置两个按钮的内容
        body.appendChild(div);
        body.appendChild(button1);
        body.appendChild(button2); //把div和两个按钮插入进文档
        
        get();
        num++;
    };
    function get(){
        var Div=document.getElementsByClassName('div'+num)[0];
        var aBtn1=document.getElementsByClassName('button'+num);
        aBtn1[0].onclick=function(){         //第一个button按钮
            Div.style.width='300px';
        };
        aBtn1[1].onclick=function(){        //第二个button按钮
            Div.style.height='300px';
        }
    }
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题