第 11 章 复杂的跑马灯
•
上一章讲述了在 HTML 页面中，如何通过 JavaScr
ipt 实现用户和表单的互动。与将所有任务都由服
务器端计算完成相比， JavaScript 实现的表单互
动有着反应快速，节约服务器资源，用户体验好
等优点。 JavaScript 可以实现的互动远不止操作
表单元素这么简单，另一种常见的应用就是使用
JavaScript 操作页面元素的样式。
11.1 示例：一个向左弹性滑入，向上滑出的跑马灯
•
在初学 HTML 的时候，读者想必已经学习过如何使用“ <marquee
>” 标记来实现跑马灯的效果。然而随着标准化的推行，在 xHTML
1.1 中，“ marquee” 不再被认为是一个合法的 HTML 标记，这就要
求页面设计者寻找一种可以替代“ marquee” 标记的办法。另一方
面，有时设计师需要一些比较复杂的滚动效果，例如元素自右向
左滑入，然后再向上滑出，这样的效果也不是简单的“ marquee”
标记可以实现的。
11.2 用 JavaScript 控制内联 CSS
•
CSS 是“ Cascading Style Sheet” 的缩写，译作“层叠样式表单”。是用于控制网页样
式，并允许将样式信息与网页内容分离的一种标记性语言。
•
为了便于理解 JavaScript 和 CSS 的关系，需要理解 CSS 和 HTML 的结构。在 HTML
页面中使用 CSS 有三种方式：外部样式表、内部样式块和内联样式。可以先建立外
部样式表文件（ .css ），然后使用 HTML 的 link 对象，将其嵌入 HTML 页面中，称
为外部样式表，例如：
•
<!-- 外部样式表 -->
•
<link rel="stylesheet" href=" 样式表 URL.css" type="text/css" />
•
或者可以在 HTML 文档的“ <HTML>” 和“ <BODY>” 标记之间插入一个“ <STYLE>...</S
TYLE>” 块对象（此样式块通常放置在“ <HEAD>” 标记内），称为内部样式块，例如：
•
<!-- 内部样式块 -->
•
<head>
•
<title> 文档标题 </title>
•
<style type="text/css">
•
body { color:red; }
•
/* 样式表内容 */
•
</style>
•
</head>
11.2.1 CSS 名称和 JavaScript 属性的对应
•
JavaScript 中， HTML 元素的内联样式被放置在该对象的“ style”
集合内，调用的示例如下：
•
<div style=”color:red;” id=”hutia”>This is a text division.</div>
•
<script>
•
var obj = document.getElementById(“hutia”);
•
alert(obj.style.color);
•
</script>
11.2.2 内联 CSS 样式的读取
•
绝大多数的“ style” 属性都是字符串型的。如果试图获取一个未设
置的 CSS 属性，则返回一个空的字符串（“”””）。如果试图获取“ s
tyle” 集合中一个不存在的属性，则返回“未定义”（“ undefined” ） ,
例如：
•
<div style=”color:red;” id=”hutia”>This is a text division.</div>
•
<script>
•
var obj = document.getElementById(“hutia”);
•
alert(“1:” + obj.style.color + “\r\n2:” + obj.style.fontSize + “\r\n
3:” + obj.style.hutia);
•
</script>
