使用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將自定義對象添加到文檔

回答

相關問題