Chrome 瀏覽器動態建立 <img> 標籤

設計網頁應用程式,動態建立HTML標籤是很普遍的情形,而當你建立 <img> 標籤時必須特別注意,合法名稱為 IMG 而非 IMAGE ,但是當你使用Chrome瀏覽器時,由於對於各種非標準的寫法有比較高的容錯能力,因此同樣可以執行。

考慮以下的程式碼:

window.onload = function () {
var img = document.createElement('IMAGE');
img.src = "images/IMGP0811.jpg";
img.width = "600";
document.getElementById('container').appendChild(img);
};

在網頁載入之後,其中動態建立一個  <img> 標籤,然後設定其圖片檔案來源與呈現的寬度,最後將其加入至 id 名稱設為 container 的 <div>  標籤中。

於網頁中配置一個 <div> 標籤如下:

<body>
    <div id="container">
    </div>
</body>

這是一個很簡單的範例,如果在 Chrome 中瀏覽此網頁,會得到以下的結果畫面:


如果以 Firefox 檢視則會看到以下的畫面:


現在重新修改以下的程式碼,將其中所要建立的元素名稱從 IMAGE 調整成為 IMG :

var img = document.createElement('IMG');

重新於 Firefox 檢視可以正確的呈現圖片檔案了。


沒有留言: