任务1-6　jQuery实现动态设置页面的宽度和高度

【任务描述】

由于目前使用的显示器有多种不同的规格尺寸，因此我们在设计网页时需要根据屏幕的尺寸合理设置网页的尺寸与背景。试编写代码，在网页0106.html中实现动态设置页面宽度和高度的功能。

【思路探析】

（1）根据常见的屏幕尺寸定义多种不同的样式。

（2）使用screen.width属性获取屏幕宽度数据。

（3）使用jQuery的$符号选取HTML元素，使用jQuery的addClass()方法向被选元素添加一个类，使用jQuery的removeClass方法从被选元素中删除一个类，使用jQuery的text()方法设置所选元素的文本内容。

【特效实现】

根据常见的屏幕尺寸定义的样式如表1-11所示。

表1-11　根据常见的屏幕尺寸定义的样式

引用外部JS文件的代码如下所示。

<script type="text/javascript" src="js/jquery.js"></script>

自定义函数windowMedia()，其代码如表1-12所示。

表1-12　自定义函数windowMedia()的代码

调用自定义函数的代码如下所示。

$(document).ready(function(){ 
           windowMedia(); 
}); 

网页0106.html对应的HTML代码如下所示。

<div id="content"></div>

自主训练