使用JavaScript将自定义对象添加到文档中

Add custom object to the document with JavaScript

本文关键字：文档 添加 对象 JavaScript 自定义 使用      更新时间：2024-02-19

我试图创建一个包含图像的自定义对象，然后将此对象添加到文档中。例如：

function ImageObject(path, name, type) {
   this.name = name;
   this.type = type;
   var img = new Image();
   addListener(img, 'load', function () {
      // RESIZE THE IMAGE AND DO OTHER MANIPULATIONS HERE
   });
   img.src = path;
}
var newImg = new ImageObject(test.jpg, 'my test', 'background');

然后，我想像添加普通图像一样将对象添加到文档中，并在页面上查看加载的图像。类似于：$(#container).append(newImg )。怎么可能做到这一点？谢谢

您可以将Image添加到页面（通过jQuery的append或其他任何一个），但不能将ImageObject实例添加到页面中。

不过，您可以使用jQuery的data将图像元素与ImageObject相关联，例如（假设this指的是ImageObject实例）：

$(img).data("owner", this).appendTo("#container");

然后，如果有对image元素的引用，则可以使用$(img).data("owner")取回该ImageObject。

我建议使用data，而不仅仅是在image上使用expando属性，因为当元素从DOM中移除时，jQuery会清理与元素相关的数据（前提是通过jQuery移除）。如果您使用expando属性（只是在image上设置自己的任意属性），在IE上，从DOM中删除图像时，image和ImageObject实例都不会被清理，除非您将属性显式设置为null（因为IE无法正确处理DOM元素和JavaScript对象之间的循环引用）。

您可以使ImageObject（）函数返回img：

function ImageObject(path, name, type) {
    this.name = name;
    this.type = type;
    var img = new Image();
    addListener(img, 'load', function () {
        // RESIZE THE IMAGE AND DO OTHER MANIPULATIONS HERE
    });
    img.src = path;
    return img;
}

然后，据我所知，您应该能够将它附加到DOM中。

您需要修改函数以在某个地方公开创建的DOM对象。目前，它只是一个作用域为函数的变量，在该函数之外是不可访问的。

然后使用一个标准DOM方法（appendChild、insertBefore等）。

您的自定义对象不是DOM对象，无法添加到文档本身。

这里不考虑类型参数。如果你想要一个背景img，你应该传递DIV作为引用并设置背景属性。

function ImageObject(path, name, type) {
        var img = new Image();
        addListener(img, 'load', function () {
            // RESIZE THE IMAGE AND DO OTHER MANIPULATIONS HERE
        });
        img.src = path;
        return img;
    }
var newImg = new ImageObject(test.jpg, 'my test', 'background');
$("#container").append( newImg )

构造函数的目的只是初始化一个对象。您还希望您的自定义对象处于控制之中，而不是jQuery。

我想这样做：

function ImageObject(path, name, type) {
        this.name = name;
        this.type = type;
        this.path = path;
}
ImageObject.prototype.renderTo = function( target ) {
        var img = new Image();
        this.img = img;
        img.src = this.path;
        $(img).load( $.proxy( this.loaded, this )) ;
        $(img).appendTo(target);    
};
ImageObject.prototype.loaded = function(e) {
    this.width = e.currentTarget.width;
    this.height = e.currenTtarget.height;
    //Resize
};
var a = new ImageObject( "image.png", "image", "png" );
$(document).ready(function() {
    a.renderTo("body");
});

只需在对象中添加一个this.appendTo函数。

function ImageObject(path, name, type) {
        this.name = name;
        this.type = type;
        var img = new Image();
        addListener(img, 'load', function () {
            // RESIZE THE IMAGE AND DO OTHER MANIPULATIONS HERE
        });
        img.src = path;
       this.appendTo = function(id){
             document.getElementById(id).appendChild(img);
            };
    }
var newImg = new ImageObject('test.jpg', 'my test', 'background');
newImg.appendTo("container");
相关文章：