30.4 设置屏幕对象的尺寸

作者: 王润森、王俊杰出处:人民邮电出版社　2007-10-15 16:36　砖好评论条　进入论坛

阅读提示：《精通JavaScript动态网页编程》第三十章主要讲的是浏览器与性能检测，本节介绍了设置屏幕对象的尺寸。

30.4 设置屏幕对象的尺寸

使用JavaScript可以调整屏幕对象的尺寸，本节实例中，给出一段文字，其大小可随窗口尺寸变化而变化。

技术要点
本节代码主要使用了window对象的onload和onresize事件、document对象的getElementById方法，其主要功能和用法如下。

Window对象的onload和onresize事件，用于调用相应的事件处理函数或代码，分别当窗口载入和窗口大小改变时发生。

document对象的getElementById方法用于根据id值获取页面元素的相关属性。

实现代码

 <!------------------------------文件名：30.4.htm------------------------------>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>设置屏幕对象的尺寸</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body bgcolor="yellow">
<h1>文字大小随窗口大小变化</h1><hr>
<pre id="test1">
探春判词

才自精明志自高，
生于末世运偏消。
清明涕送江边望，
千里东风一梦遥。
</pre>

<script type="text/javascript">
<!-- 
function setSize()   //函数：设置尺寸
{
if(document.getElementById)
{
theHeading = document.getElementById("test1");  //获取该段文字的相关属性
if (window.innerWidth)
theHeading.style.fontSize = (window.innerWidth / 13)+"px"; //设置字号
else if ((document.body) && (document.body.clientWidth))
theHeading.style.fontSize=(document.body.clientWidth / 13)+"px";//设置字号
}
}
window.onload = setSize;        // 初始大小;
window.onresize = setSize;      //调整后的大小
// -->
</script>
</body>
</html>

运行该程序后，页面会出现一首诗，如图30.11所示。当调整浏览器窗口大小时，该诗文字大小会随窗口大小而变化。如图30.12和图30.13所示是两种不同情况下的显示效果。

图30.11 代码30.4.htm显示结果

图30.12 文字随窗口变小

图30.13 文字随窗口变大

源程序解读
（1）程序首先定义了一个

标签对，其中显示一首古诗。并为该标签对的id赋值为“test1”，方便以后调用。

（2）在函数setSize ( )中，使用document.getElementById（"test1"）获取前述标签对的相关属性，并将其存储在变量theHeading中。

（3）随后进行判断，如果浏览器支持innerWidth属性，则利用该属性对文字大小重新赋值。否则，使用clientWidth属性对文字大小重新赋值。

（4）在代码的最后，使用“window.onload = setSize;”，当页面窗口载入时，调用setSize ( )函数，为文字大小赋值；使用“window.onresize = setSize;”，当页面窗口大小改变时，调用setSize ( )函数，为文字大小重新赋值，达到改变文字大小的目的。

【责任编辑：杜书 TEL：（010）68476606】

回书目 上一节 下一节

关于 JavaScript 技术设置 window onload document getElementById 精通JavaScript动态网页编程的

文章

博文

帖子

· 31.2 编制自己的加密算法(10/15)

· 30.3 获取浏览器窗口大小(10/15)

· 31.1 实现md5加密(10/15)

· 1.6 富浏览器端应用(04/30)

· 3.9.2 Json串形化有什么用途(04/15)

· 浅谈防火墙产品的技术发展

· SAP JAVA Windwons下环境设置

· ORA闪回技术简介

· 技术白皮书专家评审会邀请函

· 怎么源码安装 PKG_CONFIG_PATH设置

· Windows清理助手+Sreng，木马查杀绝配

· 弱电技术

· 家庭发电技术资料

· 求助:WindowsServer2000下,密码被改怎么办?谢..

· Windows XP中搜索隐藏文件的两种方法

专题

我也说两句

叫好

拍砖

中国最大的网络技术网站 ·
技术成就梦想

·假期读书充电

· 第六章　你能帮我吗？..
· Linux笔试面试题选摘测..
· 08年5月软考网管上午真..
· 性能测试从零开始目录
· 08年5月软考网工上午真..
· 上周拒绝服务攻击（DDo..

· 08年5月各大网上书店及..
· 2008年5月24日软考试题..
· 软件设计师专家临考模..
· 上周网络管理员专家自..
· 网络工程师自测获奖名..
· 08年4月各大网上书店及..

排行榜

·假期读书充电 (查看6738次)
·1.2 网络定义 (查看1197次)
·《网管员必读—网络应用》自测.. (查看1090次)
·SQL Server入门到精通技术自测.. (查看1088次)
·历次技术自测获奖网友详细信息 (查看1040次)

·SQL Server入门到精通技术自测试题答案 (8个砖)
·超级网管员——网络应用技术自测试题答案 (6个砖)
·历次技术自测获奖网友详细信息 (4个砖)
·网管员全真面试题自测获奖结果及答案解析 (4个砖)
·免费讲座：搜索引擎营销打造成功网站 (3个砖)

·假期读书充电 (13个好)
·SQL Server入门到精通技术自测试题答案 (4个好)
·Visual C++数字图像处理开发入门与编程实践 (3个好)
·路由器配置自测获奖结果及答案解析 (3个好)
·《游戏开发核心技术-剧本与角色创造》阅读不枯燥 (3个好)

·Ajax+JSP网站开发从入门到精通 (06月)
·ASP.NET Ajax网站开发从入门到精通 (06月)
·非常网管——网络管理从入门到精通 (06月)
·ANT IN ACTION 第2版中文版 (06月)
·欺骗的艺术 (06月)

·ARP协议及欺骗原理
·独家体验：在西三环亲历北京免费无..

· 周末病毒预报：视频宝..
· NAC精要指南:什么是网..
· 布线测试中的常见问题..
· ASP.NET Ajax网站开发..
· 网管员必读：网络链路..
· SQL Server 2008中不推..
· 路由器故障排除实例讲解
· Cisco 认证考试费用全..

· 微软针对XP SP2的远程..
· 山东临沂网通联合公安..
· Cisco考试费用全线涨价..
· 企业无线网络设置10大..
· Windows Server 2003网..
· 上海宣判三起网络知识..
· 微软Sever 2008自带虚..
· 金山信息安全技术公司..

订阅技术快讯

电子杂志下载

名称：SQL Server数据库管理精品黄皮书
简介：书中文章经过精挑细选，便于用户能根据自己的实际工作和学习，快速在本书寻找到相关资料。内容涵盖了SQL Server的安装与升级、语句查询、数据备份和恢复、自动化任务、数据同步、数据字典、安全和预防、性能和优化、集群等各方面应用信息，以及DBA管理人员在数据库管理工作中

名称：2007路由技术大全
简介：《2007路由技术大全》由51CTO.com网站特别策划制作，该书包括路由器技术、路由器产品、路由器配置、安全设置、路由器故障处理、路由器密码恢复，以及广大网友在实践使用中的心得经验和技巧文章，内容注重实用性，适用于初学者入门，也适合多年从业者提高，是一本实践和理论完

名称：网络安全精品应用黄皮书
简介：《2007精品网络安全黄皮书》包括了9个大类24个小类， 800余篇文章，内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。

专题

最多好

最多砖