电脑技术吧

会员投稿 会员登录 会员注册 网站公告:
搜索: 您现在的位置主页 > 网站开发 > javascript > js实例 > 正文

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

作者:admin    文章来源:互联网 电脑技术吧     点击数:    更新时间:2011-09-25
收藏】 【挑错】 【推荐】 【打印

  本站原创内容,转载请注明出处*dedecms.com

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

copyright dedecms

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

织梦好,好织梦

  本亚博ios下载地址提供的方法希望对大家做主页的时候有用。

本文来自织梦

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

  我们设置网页的风格时通常是使用CSS来设置,下面代码: 本文来自织梦

  

内容来自dedecms

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

本文来自织梦

   内容来自dedecms

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

   织梦好,好织梦

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

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

织梦内容管理系统

   dedecms.com

  然后我们在网页的body中添加如下代码: 织梦内容管理系统

  sytle1风格显示

dedecms.com

  sytle2风格显示 本文来自织梦

  提供给大家源文件: 织梦内容管理系统

   dedecms.com

  设置网页的多种风格示例 dedecms.com

   dedecms.com

  

Tags:js实例 js基础  
责任编辑:admin
发表评论 请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名:密码:新注册匿名
评论总数: [ 查看全部 ] 网友评论
关于我们 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 在线帮助