第6章利用JaaScript开发动态文档.docVIP

第6章利用JavaScript开发动态文档 目录 第6章利用JavaScript开发动态文档 1 6.1 简介 1 6.2元素定位 2 6.2.1绝对定位 2 6.2.2相对定位 5 6.2.3 静态定位 6 6.3 移动元素 6 6.4元素可见性 9 6.5修改颜色和字体 10 6.5.1修改颜色 10 6.6 动态内容 13 6.7 堆叠元素 16 6.8定位鼠标光标 19 6.9 响应鼠标单击 21 6.10 缓慢移动元素 22 6.11拖放元素 25 我们可将动态XHTML文档通俗地定义为当通过浏览器进行显示时，还可以按照某种方式进行修改的文档。提供动态文档的最常用的客户端方法是使用JavaScript操纵显示文档的DOM对象。显式的用户交互请求可以触发对文档的修改，同样，也可以通过定期修改文档，或者当浏览器事件发生时修改文档。 XHTML元素初始时可能会位于浏览器中任意给定的位置。但是，如果按照某种特殊的方式对元素进行定位，那么可以动态地将元素移动到显示窗口中的其他位置。可以使元素不可见，也可以使元素重新出现。文档的背景色和前景（元素）色也都是可以改变的。显示文本的字体、字体大小和字体样式也可以改变。甚至元素的内容都可以改变。文档中的重叠元素可以按某种自上向下的堆叠顺摩进行定位，堆叠顺序也是可以动态修改的。当在文档上单击鼠标时，可以确定光标在浏览器窗口中的位置。还可以使元素在浏览器窗口中四处缓慢移动。最后，可以将元素定义为允许用户将它们拖放到浏览器窗口的任意位置。本章将对这些内容展开讨论。 6.1 简介 动态XHTML并不是一种新的标记语言。它是一个技术集合，可供动态修改通过XHTML描述的文档。确切地讲，所谓动态XHTML文档，其含义是指可在文档已显示并仍在显示时通过用户交互或浏览器事件，对其标签属性、标签内容或者元素样式属性进行修改。可通过嵌入式的脚本来完成此类修改，脚本可以将文档元素作为相关文档对象模型 DOM 结构中的对象来访问。 各种不同浏览器对动态XHTML的支持并不统一。与第5章一样，本章的讨论限定在W3C标准中的方法而不是某一种浏览器供应商所定义的特性。本章中的所有示例，除了6.11节之外，使用的都是DOM 0事件模型，因此都可以在IE8和FX3浏览器中正确显示。6.11节中的示例使用的是DOM 2事件模型，这是因为如果采用DOM 0事件模型将无法按照标准方式进行设计。由于IE8不支持DOM 2事件模型，因此，该节中的示例无法在IE8中正确显示。 本章将讨论如何利用客户端JavaScript来实现基于XHTML文档的用户交互。第8~10章将讨论如何利用服务器端技术来实现基于XHTML文档的用户交互。 6.2元素定位 在能够实现HTML 4.0的浏览器问世之前，Web站点的开发人员几乎无法控制HTML元素在文档中的布局。在很多情况下，HTML文件中的元素就是简单地放到文档中，就像在使用文字处理器那样直接将文本放到文档中——填满一行，开始一个新行，再填满这一行，诸如此类一直持续下去。HTML表格为元素布局提供了一种分栏框架，但不够灵活，并且显示所需的时间也非常长。不过，缺乏强大和快速的元素布局控制方式这一情况随着1997年W3C的层叠样式表定位 Cascading Style Sheets-Positioning，CSS-P 的发布而结束了。 CSS-P完全得到了IE8和FX3的支持。CSS-P不仅能够用于将任意元素定位到文档显示窗口的任意位置，能够动态地将某个元素移动到显示窗口的某个新位置，还能够利用JavaScript修改元素的定位样式属性。这些样式属性的名称为left和top，分别表示位于左方和上万的某个参考点与元素所处位置之间的距离。将另一个样式属性position与属性left和top联合使用能够在更高层次上控制元素的布局和移动。position属性有三个可能的取值，分别为absolute、relative以及static。 6.2.1绝对定位 将属性position的值设定为absolute，其含义为元素在文档显示窗口中的位置与其他元素的位置无关。例如，如果需要设定某个文本段落的位置为距离显示窗口的左边缘100像素，离显示窗口顶部边缘200像素，那么可采用如下元素进行设定。 p style position: absolute;left: 100px;top: 200px -- text -- 绝对定位的一种应用是将某一组特殊的文本与一组普通的文本段落相叠加，以便产生类似于纸面上的水印效果。可以把一组字母之间留有间距的浅灰色较大斜体文本作为特殊文本，它能够使普通文本及其自身都比较清晰易读。下面的XHTML示例文档实现了这种格式的特殊文本。在这个示例中，显示了一组对苹果进行描述的正常文本