JavaScript document.write 顯示圖片

JavaScript document.write 的特性除了可以輸出文字字串之外，還可以輸出包含 HTML 標籤的內容，本篇就是要透過這樣的特性讓 JavaScript 也能輸出圖片至網頁上，讓傳統的 HTML img 圖片插入方式有更豐富的變化，實做的部分要結合 JavaScript document.write 以及 HTML img 標籤即可做到，幾乎所有主流的瀏覽器都支援 document.write 顯示圖片的效果，請看所需要的兩種基本語法。

Document.write 與 HTML img 基本語法

Script	語法結構
Document.write	document.write(' 這裡寫你要呈現的文字 ');
HTML img	<img src="圖片網址放在這裡">

只要結合這兩種語法，就可以輕鬆的將圖片透過 JavaScript document.write 的方式輸出到網頁。

JavaScript document.write 顯示圖片範例

以上範例輸出結果

範例中的 document.write 運用了簡單的 HTML img 圖片標籤語法，做到了輸出圖片的效果，除此之外，其實還可以加入其他的效果，例如加入圖片超連結或是為圖片加上邊框等美化效果，這些特效都是透過 document.write 與 HTML 標籤結合做出來的。

相關主題研究