動態HTML
维基百科，自由的百科全书
（重定向自DHTML）
 |
此條目或章节需要擴充，请協助改善这篇條目。（2011年2月12日） 更進一步的信息可能會在討論頁或扩充请求中找到。请在擴充條目後將此模板移除。 |
動態HTML（Dynamic HTML，简称DHTML、DHML）是一种通过结合HTML、用戶端脚本语言（Client Side Script，如JavaScript）、串接樣式表（CSS）和文件物件模型（DOM）来创建動態網頁內容的方法。
目录 |
[编辑] 应用
- 产生交互式表单
- 生成类似WebCT的e-learning交互式在线基础培训
- 创建基于浏览器的视频游戏
[编辑] 結構
一個典型的使用 DHTML 如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DHTML example</title> <script type="text/javascript"> function init() { myObj = document.getElementById("navigation"); // .... more code } window.onload=init; </script> </head> <body> <div id="navigation"></div> <pre> Often the code is stored in an external file; this is done by linking the file that contains the JavaScript. This is helpful when several pages use the same script: </pre> <script type="text/javascript" src="myjavascript.js"></script> </body> </html>
[编辑] 範例
範例如下：[1]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> h2 {background-color: lightblue; width: 100%} a {font-size: larger; background-color: goldenrod} a:hover {background-color: gold} #example1 {display: none; margin: 3%; padding: 4%; background-color: limegreen} </style> <script type="text/javascript"> function changeDisplayState (id) { d=document.getElementById("showhide"); e=document.getElementById(id); if (e.style.display == 'none' || e.style.display == "") { e.style.display = 'block'; d.innerHTML = 'Hide example..............'; } else { e.style.display = 'none'; d.innerHTML = 'Show example'; } } </script> </head> <body> <h2>How to use a DOM function</h2> <div><a id="showhide" href="javascript:changeDisplayState('example1')">Show example</a></div> <div id="example1"> This is the example. (Additional information, which is only displayed on request)... </div> <div>The general text continues...</div> </body> </html>
[编辑] 參考文獻
|
||||||||||||||||||||||||||
