用CSS和JS实现网页的多种风格的设置

　　大家都见过好多网页可以实现多种风格的显示，比如动网论坛等等，而且好多网站都设置多种风格，方便用户按照自己的设置风格来浏览你的网站。

　　实现的方法我在这里不做讨论。今天我给大家介绍一种特简单的方法，用CSS+JS简单方法就可以实现网页的多种风格显示。

　　本教程提供的方法希望对大家做主页的时候有用。

　　我认为这是一种最好的实现方法了，如果大家还有其他简单的方法可以和我讨论。QQ ：76312395 网站：http://www.webjx.com，不说废话了，下面开始给大家介绍如何实现的方法：

　　我们设置网页的风格时通常是使用CSS来设置，下面代码：

　　使用上面的代码通常我们事先设置好style1.css的内容，然后把上面的代码放到head 区域内，如果你不清楚的话，你可以去看看相关CSS的教程来设置。当网页被加载之后将按 style1.css设置的风格来显示我们网页的内容。如果我们想实现多种风格的显示，，那么我们就要对上述标签的内容进行稍微改变了，我们可以添加一个title属性，如下代码：

　　如果把上面的代码添加到网页中，浏览页面时效果和上面的显示效果是一样的，但是这时我们已经给加载的style1.css命名了一个标题。这个风格就是我们网页的默认风格，这时如果我们还想添加其他的风格，那么这时我们只有来改变rel属性的值了。具体代码如下：

　　当浏览器浏览时style2.css也将被加载，但是这时由于rel的属性为alternate，就实现了虽然加载了但是不会被显示出效果的。我们如果也想使style2.css来实现显示效果，那么这时的办法是我们注意到了上面的代码都有title属性，我们可以设法使用一个函数来调用 title属性的之来实现让网页显示style2.css的效果。这是我们可以使用js来编写一个函数来实现网页多种风格的显示了。

　　我们实现的方法是在网页上做多个连接(当然连接的做法非常多的，比如动网论坛是用的下拉菜单)，当单击连接时去调用不同的CSS文件，从而实现了网页多种风格的显示。在这里因为函数的内容比较多，我们可以做成一个js文件，然后再网页上添加如下代码：

　　然后我们在网页的body中添加如下代码：

　　<a href="#" onclick="setActiveStyleSheet ('style1'); return false;">sytle1风格显示</a>

　　<a href="#" onclick="setActiveStyleSheet ('style2'); return false;">sytle2风格显示</a>

　　提供给大家源文件：

　　<HEAD>

　　<TITLE>设置网页的多种风格示例</TITLE>

　　</HEAD>

　　<BODY>

　　<P>网页教学网http://www.webjx.com默认的风格</P>

　　<BR>

　　<A onclick="setActiveStyleSheet('style2'); return false;" href="#">第二中风格</A>

　　</BODY>

　　</HTML>

　　把上面的代码保存为一个扩展名为.htm(或.html)的文件

　　提供style1.css 、style2.css、 stylealter.js下载

　　点击这里看看演示效果吧！

　　当然我给大家提供的上面的.htm(或.html)文件和style1.css 、style2.css与 stylealter.js要方法同一目录下，如果不在同目录那么你就要改变href="style1.css"和 src="stylealter.js"的目录了！

　　本例子目的就是给大家介绍网页显示多种风格的方法，CSS设置非常简单，希望大家学会方法设置出更加复杂的CSS，你的页面就漂亮了。去试试吧！

上一篇：页面两侧对联广告(允许关闭)代码效果下一篇：精彩:Javascript经典技巧