JavaScript程序的设计（第2版）04.读取XML.ppt

读取XML; 内嵌样式是使用style标签属性直接为单个HTML元素应用的样式表(CSS)指派。而使用 style对象可以检查这些指派，并进行新的指派或更改已有的指派。要使用style对象，应该在元素对象上使用style关键字。要获得内嵌样式的当前设置，应该在style对象上使用对应的style对象的属性。 下面的将给定文档中的全部绝对定位的图像都放置在文档顶部，代码如下：;1．检索样式表中的属性值 在Netscape 6.0以后的版本中，使用Style对象检索属性值。;style元素对象的常用样式标签属性和样式属性如表9-1所示。;表9-1 style元素对象的常用样式标签属性和样式属性;（3）backgroundImage属性 backgroundImage属性用来设置或检索对象的背景图像。其对应的样式标签属性为background-image属性。; 例9-2 在制作网页时，为了使网页更加美观，在页面背景中会添加一个图片，但有时因图片过小，在页面中会重复显示图片，这样，反而破坏了页面的美观性。本示例将使页面中的背景固定居中， 当页面内容过多时，无论怎样移动滚动条，背景图片始终固定居中。 在本示例中，主要通过style对象中的backgroundImage、backgroundPosition、backgroundRepeat和backgroundAttachment属性，在页面中添加背景图片，并对图片进行居中显示，代码如下。;4．边框属性 （1）borderColor属性 borderColor属性用于设置或检索对象的边框颜色。其对应的样式标签属性为border-color属性。;（3）borderStyle属性 borderStyle属性用于设置或检索对象上下左右边框的样式。其对应的样式标签属性为border-style属性。;例9-3 在浏览网页时，经常会看到带有特殊效果的页面，本示例将通过对窗口样式的设置，使窗口具有立体效果。本示例主要应用了style对象的borderWidth（边框的宽度）、borderColor（边框的颜色）和borderStyle（边框的样式）属性，对页面的边框进行设置。编写用于实现立体窗口的JavaScript代码如下。; 5．定位属性 （1）clip属性 clip属性检索或设置对象的可视区域。区域外的部分是透明的。必须将postiton的值设为absolute，此属性方可使用。其对应的样式标签属性为clip属性。;（3）left属性 left属性用于设置或检索对象相对于文档层次中下一个定位对象的??边界的位置。其对应的样式标签属性为left属性。;6．字体属性 （1）fontStyle属性 fontStyle属性用于设置或检索对象中的字体样式。其对应的样式标签属性为font-style属性。;font-weight属性的参数值如表9-3所示。;表9-4 font-size属性的参数值;（6）fontFamily属性 fontFamily属性设置或检索用于对象中文本的字体名称序列。默认值为 Times New Roman。其对应的样式标签属性为font-family属性。;例9-4 一般网站中都有很多超链接，有时当我们将鼠标移动到某一超链接上时，此超链接就会以不同的字体样式显示，例如超链接的字体样式显示为斜体、粗体、下划线、删除线或是粗斜体等。本示例将通过JavaScript改变超链接字体样式，应用了字体样式中的fontWeight、fontStyle以及textDecoration属性，通过设置其属性值，改变超链接的字体样式。代码如下：;运行结果如图9-4所示。;例9-5 本示例实现了使用鼠标滚轮放大缩小图片，当用户将鼠标移动到图片上时，图片将会检索焦点，然后用户可以滚动鼠标滚轮来改变图片的大小。在本示例中，主要是通过Event对象的wheelDelta属性（用于检索鼠标的滑轮键的值）控制图片的放大或缩小的倍数，再根据检索的值改变图片的style对象的zoom属性来实现。代码如下：