JScript中innerHTML的例子
Ghost 发表于 [2005-12-16 11:33]
使用JScript的innerHTML属性,可以获取或设置位于指定的 HTML 服务器控件的开始标记和结束标记之间的内容。这个属性现在在页面设计中很流行,因为它可以让静态的页面也能实现动态的效果。
如你可以让静态的页面也实现像ASP页面中的将顶部和底部分别存成一个文件再用include包含到页面中,实现模版的功能。下面看看如何实现:
先做好顶部和底部,如下:
-----------------------------顶部 top.html-------------------------------
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="blue">
<tr>
<td>这是顶部</td>
</tr>
</table>
-----------------------------------------------------------------
-----------------------------底部 bottom.html-------------------------------
<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="red">
<tr>
<td>这是底部</td>
</tr>
</table>
-----------------------------------------------------------------
然后将这两部分的代码分别用下面的格式存成JS文件:
-----------------------------顶部 top.js-------------------------------
var str;
str='<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="blue">';
str=str+' <tr>';
str=str+' <td>这是顶部</td>';
str=str+' </tr>';
str=str+'</table>';
top.innerHTML=str;
-----------------------------------------------------------------
-----------------------------底部 bottom.js-------------------------------
var str;
str='<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="red">';
str=str+' <tr>';
str=str+' <td>这是底部</td>';
str=str+' </tr>';
str=str+'</table>';
bottom.innerHTML=str;
-----------------------------------------------------------------
下面我们看看要调用这两个部分的文件:
---------------------------------try.html--------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JScript中innerHTML的例子</title>
</head>
<body>
<!-- 顶部开始 -->
<div id="top"></div>
<!-- 顶部结束 -->
<!-- 主要内容开始 -->
页面主要内容
<!-- 主要内容结束 -->
<!-- 底部开始 -->
<div id="bottom"></div>
<!-- 底部结束 -->
<script language="javascript" src="top.js"></script>
<script language="javascript" src="bottom.js"></script>
</body>
</html>
-----------------------------------------------------------------
这样当你打开try.html的时候,就可看到顶部和底部都已经自动加进来了。
需要注意的是,在JS文件中的innerHTML前面的id名与要调用的页面中的id名要一至。例子中的top和bottom。
分享到:
相关推荐
"jscript 500个例子" 是一个旨在帮助初学者掌握JavaScript基础和进阶技巧的资源集合,通过大量的实践示例来深入理解其语法和用法。 在学习这500个例子时,你可以按照以下几个关键知识点进行系统性的学习: 1. **...
这些例子可以帮助你更好地理解JavaScript的工作原理,并将其应用到实际项目中。 jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理、动画制作和Ajax交互。"jQueryAPI-100214.chm"包含了完整的jQuery API...
在这个例子中,可能涉及到以下几个关键知识点: 1. **ASP基本结构**:ASP页面通常包含HTML标记、脚本代码以及服务器端的ASP指令。脚本代码可以在服务器端执行,并返回结果到客户端浏览器。 2. **ASP内置对象**:...
在这个例子中,我们将创建一个ASP文件(例如:getAjaxName.asp),来处理整数加法的逻辑。在`getAjaxName.asp`中,可以创建一个函数,接收两个参数(通过GET请求传递过来的整数),然后返回它们的和: ```vbscript ...
在这个例子中,VBScript被用来根据用户输入或预设参数动态生成HTML和JavaScript代码。具体来说,代码中的`for`循环负责生成一系列的JavaScript语句,每个语句都调用`$((a*100/fs)%>)`函数,该函数会更新进度条的状态...
在这个例子中,当请求完成并成功收到响应时,JavaScript会解析服务器返回的JSON数据,并更新ID为`dataSection`的DOM元素内容。 至于`data.mdb`,这是Microsoft Access数据库文件,用于存储论坛的相关数据,如帖子、...
题目中给出了几个可能的自闭合HTML标签的例子,具体分析如下: - **选项A**: `<TEXTAREA>` - 不是自闭合标签。 - **选项B**: `<INPUT type="text" />` - 是自闭合标签,表示一个文本输入框。 - **选项C**: `...
5.7 状态栏,title栏的动态效果(例子很多,可以研究一下) 5.8 双击后,网页自动滚屏 6、树型结构。 6.1 asp+SQL版 6.2 asp+xml+sql版 6.3 java+sql或者java+sql+xml 7、无边框效果的制作 8、连动下拉框技术 9...
document.documentElement.innerHTML 第一个style标签 document.styleSheets[0] style标签里的第一个样式 document.styleSheets[0].rules[0] 防止点击空链接时,页面往往重置到页首端。 ()">word 上一网页...