画像を表示する

広告

前ページにてHTML文書を書き出すことも出来ることを書きましたが、タグが書けますので<img>タグを使って画像を表示させることも出来ます。

一度試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<p>
ここから下がJavaScriptで出力したものになります。
</p>

<script type="text/javascript" src="./js/script2_1.js">
</script>

<p>
ここから上がJavaScriptで出力したものになります。
</p>

</body>
</html>

document.write('<img src="./img/maru.png" width="104" height="91" />');

上記をブラウザで見ると下記のように表示されます。

p2-1

注意する点としては<img>タグなどのように要素内で""ダブルクオーテーションを使っている場合には、document.writeの引数の指定の際にダブルクオーテーションではなく''シングルクオーテーションで囲って引数を指定します。

スタイルシートを適用

documnetへ書き出した内容についてもスタイルシートが適用できるかどうか確認しておきます。

下記では先程のサンプルに付け加えて、documentで書き出した<img>タグに対してスタイルシートを適用させてみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>

<style type="text/css">
img{
border:solid 3px #333333;
}
</style>

</head>
<body>

<p>
ここから下がJavaScriptで出力したものになります。
</p>

<script type="text/javascript" src="./js/script2_2.js">
</script>

<p>
ここから上がJavaScriptで出力したものになります。
</p>

</body>
</html>

document.write('<img src="./img/maru.png" width="104" height="91" />');

上記をブラウザで見ると下記のように表示されます。

p2-2

JavaScriptによって作成されたコンテンツに対してもスタイルシートが適用されていることが確認できます。

( Written by Tatsuo Ikura )