个人中心
gpt4 book ai didi

javascript - 扩展 DIV 元素时如何制作多个元素？

转载 作者：行者123 更新时间：2023-11-29 15:01:08 24 4
gpt4 key购买 nike

我试图通过使用新创建的 div 作为我的对象的原型(prototype)，通过 Javascript 来“扩展”一个 DIV。

据我了解 Javascript，在通过“new”创建对象的新实例时，原型(prototype)对象被复制，分配给“this”，然后执行函数(作为构造函数)。

一切似乎都正常，除了每当我创建另一个对象并将其添加到 DOM 时，它会“替换”原始的 div。更准确地说:构造函数总是更改同一个 div。

使用 MyTest.prototype = document.createElement("div"); 给了我所描述的行为，在我的代码示例中之后的两条注释行也是我尝试过的，但无济于事.

我知道尝试扩展 DOM 是不受欢迎的，但我想了解这种行为，因为我认为我知道原型(prototype)是如何工作的，而这根本不符合我的想法。

这是我正在尝试做的一个最小示例:

<!DOCTYPE html>
<html>
<head>
<title>Div-Prototype-Test</title>
<script type="text/javascript">

var height = 20;
var top = 0;

function MyTest() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);

    this.style.backgroundColor = "rgb("+ r +","+ g +","+ b +")";
    this.style.position        = "absolute";
    this.style.width           = "500px";
    this.style.height          = height + "px";
    this.style.top             = top + "px";

    top += height;

    document.getElementsByTagName("body")[0].appendChild(this);
}

MyTest.prototype = document.createElement("div");
// MyTest.prototype = document.createElement("div").cloneNode(true);
// MyTest.prototype = new Element();

window.addEventListener(
    "load", 
    function() {
        var a = new MyTest();
        var b = new MyTest();
        var c = new MyTest();
        var d = new MyTest();
    }
);

</script>
</head>
<body>
</body>
</html>

PS:由于某个 Javascript 框架，我搜索任何更改 Javascript 原型(prototype)的内容总是导致数百个与我的问题无关的结果 - 如果我错过了一个已经讨论过的问题，请告诉我。

编辑:

为了让我的问题更清楚:

这是我使用对象作为原型(prototype)的示例 - 它的属性被复制。 

function A() {
}

A.prototype = { property: 4 };

A.prototype.set = function(num) {
    this.property = num;
}

window.addEventListener(
    "load", 
    function() {
        var message = "";

        var x1 = new A();
        message += "A1 : "+ x1.property +"\n";

        x1.set(15);
        message += "A1 : "+ x1.property +"\n";

        var x2 = new A();
        message += "A2 : "+ x2.property +"\n";

        alert(message);
    }
);

警报然后说:

A1 : 4
A1 : 15
A2 : 4

然而，我的第一个示例中的 Div 似乎并未被复制，它的行为类似于 Singleton 或 Monostate。不应该这样吗？

  1. Protype 对象被复制到一个新对象中
  2. 新对象被分配给“this”
  3. 这是给构造函数的
  4. this 由构造函数返回(如果没有指定 return 语句)

最佳答案 

MyTest.prototype = document.createElement("div");

这一行只执行一次。它创建了一个 MyTest.prototype也是 DOM 元素的对象 <div> . 每个 MyTest对象将接收相同的原型(prototype)。因此，每个 MyTest您创建的对象将与此单个 <div> 相关联你只创建了一次。您必须创建一个新的 <div>对于每个 MyTest .

试试这个模式:

MyTest = function() {
    var myDiv = document.createElement("div");

    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);

    myDiv.style.backgroundColor = "rgb("+ r +","+ g +","+ b +")";
    myDiv.style.position        = "absolute";
    myDiv.style.width           = "500px";
    myDiv.style.height          = height + "px";
    myDiv.style.top             = top + "px";

    top += height;

    document.getElementsByTagName("body")[0].appendChild(myDiv);

    return myDiv;
}

此函数创建一个新的 <div> , 使用 createElement()称呼。然后，它会在新的 <div> 上设置您想要的所有属性。 .最后，它返回您的新 <div> .因此，您可以将其称为

var myNewDiv = MyTest();
var myNewDiv = new MyTest();

两种选择都可以。在第二种情况下，new 创建了一个虚拟的新对象。关键字，但这并不重要，因为新的 <div>在函数内部创建的实际上是返回的。

关于javascript - 扩展 DIV 元素时如何制作多个元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10091337/

24 4 0
文章推荐： sql - 当 COUNT 另一个表时，从表中选择 2 行
文章推荐： android - RecyclerView 中的 CardView 调整大小动画
文章推荐： mysql - 如何在mysql控制台中知道我的用户名和密码
文章推荐： javascript - Google Map Bug，Dragend Event 也会触发 IE 中的 Click Event
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com