Wazap! Blog - ワザップ!ブログ

その2は、表示させるコンテンツ等をJavascriptで生成するやり方。
完成図はこれ。↓

ちょーシンプルなレイアウト。
Javascriptはこちら↓

<script type="text/javascript">
window.onload = function(){
var div = document.createElement("div");
div.id = "dialog";
div.style.width = '200px';
div.style.height = '200px';
div.style.borderWidth = '1px';
div.style.borderStyle = 'solid';
div.style.borderColor = '#000';
var img = document.createElement("img");
img.setAttribute('src' ,'http://img.jp.wazap.com/images/blog/logo.png');
img.style.marginTop = '57px';
div.appendChild(img);
var objBody = $("dialogSample2");
objBody.appendChild(div);
}
</script>

このスクリプトは単純にdivにborderを指定して、画像をその中に入れただけ。

今回はブログ用にvar objBody = $(”dialogSample2″);としたが、var objBody = document.getElementsByTagName(”body”).item(0);としてbodyの直下に指定する事もできる。

今回はここまで。