動態HTML:修订间差异
删除的内容 添加的内容
第28行: | 第28行: | ||
</pre> |
</pre> |
||
<script type="text/javascript" src="myjavascript.js"></script> |
<script type="text/javascript" src="myjavascript.js"></script> |
||
</body> |
|||
</html> |
|||
</source> |
|||
== 範例 == |
|||
<!-- |
|||
The following code illustrates an often-used function. An additional part of a web page will only be displayed if the user requests it. In [[e-learning]], such a function might be used to display additional hints or an answer that the student initially should not see.--> |
|||
<source lang="xml"> |
|||
<!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> |
</body> |
||
</html> |
</html> |
2010年9月1日 (三) 06:20的版本
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>
範例
<!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>
|
这是一篇與计算机相關的小作品。你可以通过编辑或修订扩充其内容。 |