现在网页制作技术日新月异,网页做得越来越绚丽了,功能做得越来越符合浏览者的要求了,前阵子在一个网页上看到一个用户可以自己更换皮肤的功能,很不错,其实实现起来也不复杂的,我研究了一下:

把基本的CSS抽取出来命名为style.css。这个文件不论字体是放大还是缩小都要用。然后我们根据需要再划分3个css文件。分别定义了大,中,小字体的时候页面的元素外观。

在html的顶部引用css文件。

<link rel=”stylesheet” type=”text/css” href=”style.css” />

<link rel=”stylesheet” type=”text/css” href=”text-small.css” title=”Small Text” />
<link rel=”alternate stylesheet” type=”text/css” href=”text-medium.css” title=”Medium Text” />
<link rel=”alternate stylesheet” type=”text/css” href=”text-large.css” title=”Large Text” />

细心的你会看到上面的rel属性有不同。

对了,这就是关键!

html认为只有rel=”stylesheet”的css文件才会被最终调用。我们只需要编写一个js脚本来修改各个css的rel属性就可以实现更换不同的css了。

在HTML内容区的最上面增加

<script type=”text/javascript” src=”dngz_switcher.js”></script>

点击这里下载dngz_switcher.js

dngz_switcher.js会在html页面中增加更换字体大小的链接按钮。

在新窗口中查看效果页

顺着这个思路,你可以制作更换皮肤,更换布局等以及更多的很棒的效果!

Tags:

http://blog.dngz.net/395.htm

我想发表对此文的评论 ...(没有弹出错误信息则说明评论成功,需要等待审核.)