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

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

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)。这怎么可能呢？谢谢。

来源

2012-07-24 Light

哇很多答案，谢谢，我真的不知道这是正确的。如果我的目的是稍后获取该对象并在该对象中调用一个函数，这将是最佳选择？ – Light 2012-07-24 14:10:38

你可以让你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，据我所知。

来源

2012-07-24 10:39:08 djeglin

您需要修改某处露出创建DOM对象的功能。目前它只是一个变量，它的作用域是该函数的范围，并且不能在该函数之外访问。

然后您使用其中一种标准DOM方法（appendChild,insertBefore等）。

您的自定义对象不是一个DOM对象，不能被添加到文件本身。

来源

2012-07-24 10:31:35 Quentin

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

但是，您可以执行的操作是使用jQuery的data将图像元素与ImageObject关联，例如，（假设this指ImageObject实例）：

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

然后你可以使用$(img).data("owner")来获取ImageObject回来，如果你有到image元素的引用。

我建议使用data，而不是仅仅使用关于image一个expando属性因为jQuery清理当所述元件从DOM删除的元素相关联的数据（提供的移除是通过jQuery）。如果您使用的是expando属性（仅在image上设置您自己的任意属性），则在IE上，除非您明确将您的属性设置为null（如果您将属性设置为image或ImageObject）因为IE不能正确处理DOM元素和JavaScript对象之间的循环引用）。

来源

2012-07-24 10:32:36

这里我就不考虑了类型参数。如果你想要一个background-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)

来源

2012-07-24 10:34:42 EricG

只要在对象中添加一个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");

来源

2012-07-24 10:39:31 Imdad

构造的目的仅仅是初始化的对象。你也希望你的自定义对象在控制中，而不是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"); 
});

来源

2012-07-24 10:45:48 Esailija

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

回答

相关问题