【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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 檢視可以正確的呈現圖片檔案了。


沒有留言: