Web Developer's Room
HOME > DHTML講座 > ドキュメントを動的に変更する(1)     

ドキュメントを動的に変更する(1)

DHTML(Dynamic HTML)は、HTMLタグの属性を動的に変更できます。

<html>
<body>
<script language="Javascript">
function Click_Sub() {
 if (document.all.div1.style.display == "none") {
   document.all.div1.style.display = "block"
 } else {
   document.all.div1.style.display = "none"
 }
}
</script>

<input type="button" onclick="Click_Sub()" value="クリック">
<div id=div1>表示・非表示</div>

</body>
</html>
【説明】
<span>onclickというイベントが起こると、<span>display(表示/非表示属性)を切り替える。
display・・・block(表示),none(非表示),指定なし(表示)

 サンプル

ドキュメントを動的に変更することで、イベントに対してさらに動きがでます。
この例のようにdisplayを使用した場合、表示・非表示を利用して、ツリービューやタブなどの動きも可能です。

 サンプル

関連リンク
  • DHTMLとは
  • DHTMLの基本
  • DHTMLで使用できるイベント
  • ドキュメントを動的に変更する(2)
  • ドキュメントを動的に変更する(3)
  • ドキュメントを動的に変更する(4)




  • スポンサードリンク


    (C) Web Developer's Room All rights reserved.