|
29.2 显示和修改文字内容（DHTML） 本节实例给出一种使用DHTML对象模型方法显示和修改文字内容的实现方法。当用户单击“显示”按钮时，可以显示相应文字的内容，当用户单击“改变”按钮时，可以改变相应文字的内容。 技术要点 本节代码主要使用了DHTML对象模型方法显示和修改文字内容的实现方法和innerHTML属性，其主要功能和用法如下。 DHTML对象模型方法为JavaScript提供了得到网页对象的另外方法，使用时可以不必具体了解文档对象模型的结构层次，而直接得到网页中的所需元素对象。这样，JavaScript就可以方便地改变网页内容及网页的表现方式。 该对象模型方法具有如下特点。在HTML中，网页中的每一对标记就是一个元素对象，例如，<p></p>、<div></div>、<table></table>等。为得到网页中的对象，可先将每一个标记赋值为一个惟一的id，例如，<p id="block1"></p>、<div id="titleBar"></div>等。
通过对对象id的引用，就可以使用“document.getElementById（元素标识）”方法得到所需的方法。
innerHTML属性允许对HTML元素内容的简单读取和修改。在IE中，还支持innerText、outerText、outerHTML属性。
innerText与innerHTML类似，只是用innerText设置的内容都被作为纯文本来处理。因此，不会生成相应的HTML元素。outerText与outerHTML属性，分别和相对的Inner属性相似，只是这两个属性还对元素本身进行修改。
实现代码 <!------------------------------文件名：29.2.htm------------------------------>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DHTML对象模型方法</title>
<script language="JavaScript">
<!--
function display() //函数：显示内容
{
var title = document.getElementById('titleBar').innerHTML;
alert(title);
}
function change() //函数：修改内容
{
document.getElementById('titleBar').innerHTML =
'这是<span style="border:1px solid">改变后</span>的文本';
}
//-->
</script>
</head>
<body bgcolor="#ffc0c0">
<h2>显示和修改网页中文字的内容</h2><hr>
<h1 id="titleBar">这是一行测试文本</h1><hr>
<div style="margin-top:10px;">
<!--分别通过onclick调用display()函数和change()函数，用以显示内容和修改内容-->
<input type="button" value="显示" onclick="display();">
<input type="button" value="改变" onclick="change()">
</div>
</body>
</html> |
运行该程序后的显示结果如图29.3所示。单击页面上的“显示”按钮，会弹出如图29.4所示的对话框。单击页面上的“修改”按钮，页面内容会改变，如图29.5所示。此时，再次单击页面上的“显示”按钮，会弹出29.6所示的对话框。  | | 图29.3 代码29.2.htm显示结果 |
 | | 图29.4 弹出的对话框 |
 | | 图29.5 改变后的显示结果 |
 | | 图29.6 改变后弹出的对话框 |
 源程序解读
（1）程序定义了一个名为titleBar的单行文本，一个“显示”按钮和一个“改变”按钮，用于对单行文本进行相应的处理。 （2）“显示”按钮的onclick事件关联函数display( )，函数中，首先使用“document. getElementById('titleBar').innerHTML”将单行文本的内容取出，并存储在变量title中，随后，使用alert(title)将其显示出来。 （3）“改变”按钮的onclick事件关联函数change( )，函数中，通过对“document. getElementById('titleBar').innerHTML”重新赋值，从而改变单行文本的内容。
|
