javascript - 怎么分别改变用JS创建出来的元素的样式？-PHP中文网问答

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

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

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

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

function Button(p, button1, button2) { this.p = p; 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.p.style.height = height + 'px' } Button.prototype.changeWidth = function(width) { this.p.style.width = width + 'px' }

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

全部回复(3)

天蓬老师2017-04-11 11:46:55 3楼

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

在这个地方创建对象

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

赞 +0

添加回复

高洛峰2017-04-11 11:46:55 2楼

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

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

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

PHP中文网2017-04-11 11:46:55 1楼

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