当前位置:  编程技术>WEB前端

如何实现多风格选择 样式实时切换

    来源: 互联网  发布时间:2014-09-06

    本文导语:  我们在制作网站的时候,希望自己的网站是多风格的,用户可以根据自己的喜好选择不同的风格,这样的风格可以是布局上的变化,也可以是色彩上的差异,也可能是针对不同的用户群而特别定制的样式。   我们该如何实...

我们在制作网站的时候,希望自己的网站是多风格的,用户可以根据自己的喜好选择不同的风格,这样的风格可以是布局上的变化,也可以是色彩上的差异,也可能是针对不同的用户群而特别定制的样式。
  我们该如何实现多风格选择与样式的实时切换呢?

  其实只是IE不支持这个功能,我们完全可以交给浏览器去完成,FireFox就支持这个功能。
  假设我们有两套CSS,分别封闭在两个不同的文件中:a.CSS和b.CSS。然后在和之间加入如下两行XHTML代码:





  然后用你的Firefox打开这个页面,在菜单栏中选择:查看 -> 页面风格,应该就可以看到“主题A”、“主题B”并可以实时进行选择了。

  我们可以用的另外一种方法就是动态程序来完成,例如ASP、PHP、JSP等,这样做的好处是直接、高效、兼容性好、可以记忆用户选择。可以将用户的选择记入Cookies也可以直接写入到数据库中,当用户再次访问的时候,就直接调用上一次访问所选择的样式。具体的制作我们这里就不详述了,可以关注我们的网站www.52css.com,我们将不定期的推出这方面的内容。

  现在我们该使用什么方法呢?让浏览器选择的方法,主流浏览器IE并不支持;用程序脚本来实现?当我的网页是静态的,也没有数据库。
  我们只能选择用javascript的办法来搞定它了。我们看下面的代码:


function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  documents.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = documents.cookie.split(';');
  for(var i=0;i  http://www.w3.org/1999/xhtml"> 阿Q家园 http://www.52css.com/attachments/month_0701/r2007128164252.css" /> http://www.52css.com/attachments/month_0701/c2007128164223.css" title="aaa" /> http://www.52css.com/attachments/month_0701/h2007128164239.css" title="bbb" /> 默认样式-白色 样式一-蓝色 样式二-橙色 iis7站长之家

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    
 
 

您可能感兴趣的文章:

  • jquery实现不同大小浏览器使用不同的css样式表的方法
  • Android定制RadioButton样式三种实现方法
  • 解决C# winForm自定义鼠标样式的两种实现方法详解
  • Android中自定义加载样式图片的具体实现
  • 用css alpha 滤镜 实现input file 样式美化代码
  • 怎样实现邮箱的实时监控?
  • jquery实现input输入框实时输入触发事件代码
  • Linux音频, Linux下能否实现 实时语音聊天 ?
  • jquery实现购物车实时结算的代码
  • jsp实现页面实时显示当前系统时间的方法
  • 采用ngxtop实现nginx实时访问数据统计
  • jQuery文本框实时显示输入字数超出则禁止输入的实现代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 在linux下如何实现无线网络迅速切换
  • 请问高手LInux 下的进程、线程的切换具体是如何实现的?
  • 如何实现Solaris10窗口切换
  • 如何 实现视窗界面与命令界面的切换。
  • UNIX SHELL实现su用户切换功能
  • 请问如何在程序中编写代码实现Treeview节点焦点的切换。
  • 谁知道如何实现 alt+tab 键切换程序的功能
  • Java 的特性切换实现 Togglz
  • destoon切换城市后实现logo旁边显示地区名称的方法
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • 请问高手:Ctrl+Alt+F1~F8可以切换虚拟终端,这个代码是在哪儿实现的?我搞不懂,最好指点源代码大概位置。
  • jquery 新闻循环切换的实现代码
  • jQuery字体大小切换的实现代码
  • python使用pyhook监控键盘并实现切换歌曲的功能
  • Jquery 点击切换图片并隐藏与显示内容的实现代码
  • Ubuntu server 安装 VM Tools 可以实现鼠标的自由切换吗?
  • activitygroup 切换动画效果如何实现
  • jQuery导航条背景切换效果的实现代码(图文)
  • Android实现Activity界面切换添加动画特效的方法
  • Android实现动态切换组件背景的方法
  • 通过javascript实现DIV居中,兼容各浏览器版本
  • socket实现多文件并发传输,求助多线程实现问题?
  • Python GUI编程:tkinter实现一个窗口并居中代码
  • interface 到底有什么用???实现接口,怎么实现??
  • 通过javascript库JQuery实现页面跳转功能代码
  • 怎么用Jsp实现在页面实现树型结构?
  • sharepoint 2010 使用STSNavigate函数实现文件下载举例
  • windows 下的PortTunnel 在linux下怎么实现?或者相应的已经实现的软件?端口映射
  • php实现socket实现客户端和服务端数据通信源代码
  • 网站重定向用C语言实现iptables,ACL实现
  • flash AS3反射实现(describeType和getDefinitionByName)


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3