本文提供了一个使用JavaScript根据屏幕宽度动态调整样式的示例。通过检查Screen对象的availWidth属性，网页能根据不同分辨率加载相应的CSS文件。
一个简单的JavaScript例子
我们会使用一个简单的脚本来结束本章。它首先会测量访问者的屏幕宽度，然后来应用一种合适的样式（通过在页面中添加一个额外的LINK元素）。我们会使用Screen对象，它是用户屏幕的一种表示。这个对象有一个availWidth 属性，我们可以得到它，由它来决定该加载那种样式。
下面是这段代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS Resolution Demo</title>
<!-- Basic style with all settings -->
<link rel="StyleSheet" href="basic.css" type="text/css" />
<!--
Extra style (applied via JavaScript) to override default settings
according to the screen resolution
-->
<script type="text/javascript">
// Define a variable called cssName and a message
// called resolutionInfo
var cssName;
var resolutionInfo;
// If the width of the screen is less than 650 pixels
if( screen.availWidth < 650 ) {
// define the style Variable as the low-resolution style
cssName = 'lowres.css';
resolutionInfo = 'low resolution';
// Or if the width of the screen is less than 1000 pixels
} else {
if( screen.availWidth > 1000 ) {
// define the style Variable as the high-resolution style
cssName = 'highres.css';
resolutionInfo = 'high resolution';
// Otherwise
} else {
// define the style Variable as the mid-resolution style
cssName = 'lowres.css';
resolutionInfo = 'medium resolution';
}
}
document.write( '<link rel="StyleSheet" href="' +
cssName + '" type="text/css" />' );
</script>
</head>
<body>
<script type="text/javascript">
document.write( '<p>Applied Style:' +
resolutionInfo + '</p>' );
</script>
</body>
</html>
尽管我们会在下章中看到if语句和循环的详细讲解，但你已经能够大概明白它是如何工作的。第一行的if语句来判断screen.availWidth 是否小于650:
if ( screen.availWidth < 650 )
如果用户的屏幕是640*480,那么它的宽度小于650, 所以大括号里的代码会被执行，low-resolution和消息会得到定义。
if ( screen.availWidth < 650 ) {
// define the style Variable as the low-resolution style
cssName = ‘lowres.css';
resolutionInfo = 'low resolution';
}
代码使用else语句继续检查屏幕的大小。最后的else语句只有在其他的判断语句都不执行的时候才会发生，所以我们假定屏幕的大小是800*600，对应的定义一个medium样式和消息。
else {
// define the style Variable as the mid-resolution style
cssName = 'lowres.css';
resolutionInfo = 'medium resolution';
}
这样也有可能是徒劳的，因为我们在这里测量用户的屏幕大小，用户可能拥有一个800*600的屏幕，但是那不意味着他们的浏览器窗口是最大化的。我们可能应用一种并不是很合适的样式。
我们使用了另一个对象：document， 用它来往网页（HTML文档）中写入数据。Document对象的write（）方法允许我们在页面中插入HTML。注意document.write() 实际上并没有改变HTML源文件的内容，只是改变了用户在他自己电脑上看到的网页。
n 注解: 实际上，在你看完本书的前几章后，你就会发现document.write() 非常有用。它非常适合于来展示脚本是如何工作的小例子、与用户进行交互、甚至对一个你不太确定的程序段进行调试，以明白它没有按你预期那样运行的原因。它还在所有支持JavaScript的浏览器上都可以运行。许多主流的浏览器提供了更好的工具和方法来进行调试，我们会在第三章中会做更多介绍。
我们使用document.write()来在文件头中写一个使用了我们已定义好的样式的link元素：
document.write( '<link rel="StyleSheet" href="' +
cssName + '" type="text/css" />' );
并在文档的主体部分，我们会写出信息来说明那种样式被应用了：
<script type="text/javascript">
document.write( '<p>Applied Style: '+ resolutionInfo + '</p>' );
</script>
稍后，我们会接触更复杂的例子，它使用JavaScript来测试用户代理和用户界面的类型。现在，我希望这个简单例子可以给你一个大致的了解，你可以使用JavaScript在你的网页中加入有弹性的元素。
扫一扫
1696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
