8.3 body元素对象

Document对象在HTML文档中并没有使用任何显式标记来描述，但JavaScript脚本将其作为文档设置的入口，这些设置的内容又作为body元素的内在属性在HTML中描述。根据DOM中节点模型的概念，可将body元素对象作为<body>标记的引用。首先考虑如下简单的HTML代码：

<p>Contents</p>

<table>

...

</table>

...

</form>

</body>

如上述的文档背景颜色bgColor、文本颜色fgColor等均可以作为body元素对象的属性来调用；同时，body标记元素对象也可以作为其他标记元素对象如<table>、<form>等的HTML容器而存在。

body元素对象具有Document对象的大部分功能，但不具有title、URL等属性，主要包含与文档页面相关的属性和方法，如设置文档背景图片的background属性、控制页面滚动条的scroll属性等。

8.3.1 获取body元素对象信息

如前所述，Document对象提供了表示文档背景、文本、链接等颜色的属性，body对象也提供了这几个属性的别名来访问文档中的各项与颜色相关的内容，如body元素对象的aLink属性、link属性和vLink属性分别对应于Document对象的alinkColor属性、linkColor属性和vlinkColor属性，而body元素对象的text属性则对应于Document对象的fgColor属性。

考察源程序8.8获取目标文档body元素对象信息的实例代码。

//源程序8.8

<!DOCTYPE HTML PUBLIC　"-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html140/strict.dtd">

<html>

<head>

<title>Sample Page!</title>

<!--

//获取body元素对象信息

function GetInfo()

{

var msg="\n获取body元素对象信息 : \n\n";

msg+="document.body.aLink = " +document.body.aLink+ "\n";

msg+="document.body.bgColor = " +document.body.bgColor+ "\n";

msg+="document.body.link = " +document.body.link+ "\n";

msg+="document.body.text = " +document.body.text+ "\n";

msg+="document.body.vLink = " +document.body.vLink+ "\n";

msg+="document.body.background = " +document.body.background+ "\n";

alert(msg);

}

//-->

</script>

</head>

<body aLink="blue" bgColor="white" link="red" text="black" vLink="purple"

background="beijing.jpg">

<br>

<a href="#">文本链接测试</a>

<p>

</p>

</form>

</center>

</body>

</html>

上述代码在<body>标记内初始化了文档背景、文本、链接等颜色及文档的背景图片。程序运行后，结果页面如图8.8所示。

在上述页面中单击“获取body元素对象信息”按钮，触发GetInfo()函数，收集当前文档的body元素对象的相关信息后，弹出如图8.9所示的警告框。

图8.8 显示body元素对象信息的原始页面图8.9 显示当前文档的body元素对象相关信息

body元素对象中与颜色相关的属性（如bgColor、text等）和Document对象的特定属性等同，而不是与旧属性名相联系。通过body元素对象的background属性设置文档页面背景图片后，浏览器使用目标图片覆盖背景颜色，可以通过如下脚本动态去除该背景图片并显示背景色：

document.body.background= "";

以上列举的属性在NN6+和IE4+浏览器上均获得完善的支持。

8.3.2 常见属性和方法汇总

body元素对象提供的属性和方法为数不多，但提供了设置文档页面的快捷途径。表8.3为body元素对象常见的属性、方法和浏览器版本支持情况。

表8.3 body元素对象常见属性和方法汇总

^类^型	^项^目	^简要说明	^{浏览器版本}
^属性	^aLink	^{表示文档中文本链接被单击后的颜色}	^NN6+^、^IE4+
	^background	^{表示文档的背景图片}	^NN6+^、^IE4+
	^bgColor	^{表示文档的背景色}	^NN6+^、^IE4+
	^bgProperties	^{标识文档滚动时页面背景图片是固定还是随文档移动，可选值}^scroll^{（表示滚动）和}^fixed^{（表示固定）}	^IE4+
	^bottomMargin	^{保存文档内容与浏览器窗口或框架底部的距离}	^IE4+
	^leftMargin	^{保存文档内容与浏览器窗口或框架左边的距离}	^IE4+
	^link	^{表示文档中未访问文本链接的颜色}	^NN6+^、^IE4+
	^rightMargin	^{保存文档内容与浏览器窗口或框架右边的距离}	^IE4+
	^text	^{表示文档中文本的颜色}	^NN6+^、^IE4+
	^topMargin	^{保存文档内容与浏览器窗口或框架顶部的距离}	^IE4+
	^vLink	^{表示文档中已访问文本链接的颜色}	^NN6+^、^IE4+
	^noWrap	^{标识是否将文档中文本限制在窗口或框架的宽度内，参数为布尔值“}^true^”或“^false^”	^IE4+
	^scroll	^{标识是否隐藏文档的滚动条，参数为布尔型字符串“}^yes^”或“^no^”	^IE4+
	^scrollLeft	^{返回页面左边与水平滚动条左端之间的距离}	^NN7+^、^IE4+
	^scrollTop	^{返回页面顶部与垂直滚动条顶部之间的距离}	^NN7+^、^IE4+
^方法	^{createControlRange()}	^{返回处于编辑模式下当前文档选定范围内所有控件形成的数组，常规视图下返回空数组}	^IE5+
	^{createTextRange()}	^返回包含^body^元素的^HTML^文本和^body^{文本对应的初始}^TextRange^对象	^IE4+
	^{doScroll(ScrollAction)}	^{模拟滚动条上的用户动作，以}^ScrollAction^{标识用户的动作，如}^PageDown^、^Left^、^PageUp^等	^IE5+

在提供上述属性和方法的基础上，body元素对象提供事件处理程序onscroll响应用户的动作，如鼠标移动滚动条到底部时调用Window对象的scroll()方法将当前浏览器窗口移动到指定位置等。

【查看所有评论(0)条】

当前章节:8.3 body元素对象

·目录

JavaScript动态网页开发详解

当前章节:8.3 body元素对象

8.3 body元素对象

8.3.1 获取body元素对象信息

8.3.2 常见属性和方法汇总

最近评论

热点评论

当前章节:8.3 body元素对象

同类图书推荐