基于JSP的Web网站构建与程序设计实训控制页面标记显示

2025-09-30 理论教育版权反馈

【摘要】：获取页面标记的文档对象后即可通过对象操作它的属性。例如，如果有下列HTML标记：则JS获取该标记的对象的语句如下：在IE中，也可将HTML标记的id属性的值直接作为它的对象名使用。E_29.htm：图3-21 控制页面标记的显示样式

获取页面标记的文档对象后即可通过对象操作它的属性。附录F列出了许多获取HTML文档对象的方法。例如，浏览器载入HTML文档的＜img＞标记后，按＜img＞标记的载入顺序生成对象并存放在document对象的属性images[]数组中。因此，下面的语句获得第一个＜img＞标记的对象：

使用下面的语句可以更改它的属性src的值，即换一张图像显示：

我们知道，每个HTML标记都可以设置id属性，用户经常通过标记的id来获取它的对象，语句如下：

其中，idValue是某HTML标记的id属性的值。例如，如果有下列HTML标记：

则JS获取该标记的对象的语句如下：

在IE中，也可将HTML标记的id属性的值直接作为它的对象名使用。例如，如果文档中有下列HTML标记：

JS中使用下列语句即可将它的文字显示的颜色改为红色：(https://www.chuimin.cn)

文档对象的属性名大多与HTML标记的属性名相同，但因HTML标记的属性class是JS的关键字，所以HTML标记的属性class在文档对象中用className表示；HTML标记的style属性的值可以是用分号隔开的多个CSS样式，而在文档对象中对style属性的引用语法是：

其中property与CSS的属性名紧密对应，但是为了避免JavaScript中的语法错误而进行了一些改变，含有连字符的多词属性（如font-family）在JavaScript中没有连字符，而是第二个单词的第一个字符大写（如fontFamily）。此外，float属性与保留字float冲突，所以被转换成cssFloat。

在程序中，通过每秒执行一次JS函数setCSS1（），定时改变标记“＜divid=＂D1＂＞了解JavaScript！＜/div＞”的属性class的值，使“class=＂css1＂”或“class=＂css2＂”，从而对应CSS的不同类选择符“.css1”或“.css2”，使字串“了解JavaScript！”在浏览器窗口中定时发生大小和颜色的变化，产生动画效果。对于按钮Ok1和Ok2，单击后执行JS函数disabled1（）或disabled2（）而改变它们的disabled属性：禁止或允许按钮起作用，这在某些情况下是很有用的，如当某段程序运行时不希望某个按钮功能打搅，就可以将该按钮禁止掉，当程序执行完再将它允许。对于程序中的＜p＞标记，为它加了两个事件onMouseOver和onMouse-out，当鼠标移到（onMouseOver）它上面时，执行JS函数ChangeTo（），改变它的style属性的值：字体变为“华文彩云”、颜色变为“rgb（0，0，255）”；当鼠标离开（onMouseout）它上面时，执行JS函数ChangeBack（），将它的字体改回“隶书”、颜色改回黑色“rgb（0，0，0）”。

使用“记事本”输入程序并存放在应用目录“webapps/ROOT”下的“E29”目录中。在浏览器地址栏中输入：http：//192.168.2.1：8080/E29/E_29.htm，则浏览器窗口显示如图3-21所示。

E_29.htm：

图3-21 控制页面标记的显示样式

基于JSP的Web网站构建与程序设计实训控制页面标记显示

相关推荐