スタイルシートのレイヤーに乗せた画像を動的に表示する方法

質問

<div id="test" style="position=absolute; top=400px; left=200px; z-index=10;"><img src="gazou.gif"></div>

上記を動的に表示するために以下の方法を考えました

var element = document.createElement('div');
element.id = "test";
element.style = "position=absolute; top=400px; left=200px; z-index=10;";
element.innerHTML = '<img src="gazou.gif">';

var objBody = document.getElementsByTagName("body").item(0);
objBody.appendChild(element);

しかしこれだと、element.style = "position=absolute; top=400px; left=200px; z-index=10;";
の部分がまずいらしく動作しません。

どのようにすればよいでしょうか。
よろしくお願いします。

回答No.2

神崎 渉瑠（@taloo）

すみません、セミコロンじゃなくて、コロンでした。

一応確認したいのですが、「動作しません」というのはどういうことでしょうか。
elementはbodyに挿入されるがスタイルシートは適用されない、ということでいいですか？（ getElementsByTagName().item()が機能しないブラウザもありますので）

だとすると、position:absoluteだけを指定したり、
element.style="position:absolute";
プロパティを１つずつ指定した場合は適用されますか？
element.style.position='absolute';
element.style.top='400px';

補足

スタイルシートが適用されないのではなく全体の処理が止まってしまいます
（問題の箇所を抜いて実行した場合、スタイルシートなしで画面左上に画像が表示されます）

また、その二つの方法だと同様に処理がとまってしまいました

回答No.1

神崎 渉瑠（@taloo）

element.style = "position:absolute; top:400px; left:200px; z-index:10;";

style属性（JavaScriptの言い方ではstyleプロパティ）はセミコロンです。

補足

style属性はセミコロンとはどういう意味でしょうか
element.style = "position:absolute; top:400px; left:200px; z-index:10;";
と、変えてみても動作しませんでした