JavaScript document.write 顯示圖片

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

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

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

JavaScript document.write 顯示圖片範例
<script language="javascript">
document.write('<img src="images/logo.png">');
</script>
以上範例輸出結果
範例中的 document.write 運用了簡單的 HTML img 圖片標籤語法,做到了輸出圖片的效果,除此之外,其實還可以加入其他的效果,例如加入圖片超連結或是為圖片加上邊框等美化效果,這些特效都是透過 document.writeHTML 標籤結合做出來的。

相關主題研究
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012