`
kuru
  • 浏览: 140629 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

CSS样式切换技巧

阅读更多

CSS样式切换技巧

样式与数据分离所带来的不只是符合标准这样的简单,样式既然与数据分离那ô样式的切换则变得理所当然的了!但是网上这样的中文教程实在是太少了!所以我收集了一部分中外网站已经实现的技术资料整理出来供网友参考。

首先要具备不同内容的CSS文件(最好ÿ个文件代表一种样式,或是代表需要作出变动的部分)。这里以三个为例:

第一个是背景为红色的CSS文件(red.css)CSS中的内容为:
body {background-color:red;}
第二个是背景为绿色的CSS文件(green.css)CSS中的内容为:
body {background-color:green;}
第三个是背景为黄色的CSS文件(yellow.css)CSS中的内容为:
body {background-color:yellow;}

然后在xthml文件中加入这三个CSS的链接
<link title="yellow" media="screen, projection" href="yellow.css" type="text/css" rel="alternate stylesheet">

css 代码
  1. "alternate stylesheet" href="red.css" type="text/css" title="red" media="screen, projection"/>   
  2. "stylesheet" href="green.css" type="text/css" title="green" media="screen, projection"/>   
  3. "alternate stylesheet" href="yellow.css" type="text/css" title="yellow" media="screen, projection"/>  

这三个中除了title不一样外还有一个地方有所不同,那就是REL。第一个与第三个都是alternate stylesheet只有第二个是stylesheet。这第二个就是当然样式。

在链接下面再导入一个JS文件,用来控制这个样式切换

js 代码
  1. function setActiveStyleSheet(title) {   
  2.   var i, a, main;   
  3.   if (title) {   
  4.   for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {   
  5.   if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {   
  6.   a.disabled = true;   
  7.   if(a.getAttribute('title') == title) a.disabled = false;   
  8.   }   
  9.   }   
  10.   }   
  11.   }   
  12.   function getActiveStyleSheet() {   
  13.   var i, a;   
  14.   for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {   
  15.   if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) return a.getAttribute('title');   
  16.   }   
  17.   return null;   
  18. }   

在合适的地方加入三个切换按钮

css 代码
  1. "javascript :void()" onclick="setActiveStyleSheet('red'); return false;" title="红色样式">   
  2. "javascript :void()" onclick="setActiveStyleSheet('green'); return false;" title="绿色样式">   
  3. "javascript :void()" onclick="setActiveStyleSheet('yellow'); return false;" title="黄色样式">   
  4. "javascript :void()" onclick="setActiveStyleSheet('none'); return false;" title="û有样式">   

好了发布试试点那三个切换链接!是不是已经切换了样式?

补遗:带有记忆功能的JS文档

js 代码
  1. function setActiveStyleSheet(title) {          
  2.     var i, a, main;          
  3.     for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {          
  4.          
  5.         if(a.getAttribute("rel").indexOf("style")!= -1 &&           
  6.        a.getAttribute("title")) {          
  7.             a.disabled = true;          
  8.             if(a.getAttribute("title") == title)          
  9.             a.disabled = false;          
  10.         }          
  11.     }          
  12. }          
  13. function getActiveStyleSheet() {          
  14.     var i, a;          
  15.     for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {          
  16.         if(a.getAttribute("rel").indexOf("style")!= -1 &&           
  17.        a.getAttribute("title") && !a.disabled)          
  18.         return a.getAttribute("title");          
  19.     }          
  20.     return null;          
  21. }          
  22. function getPreferredStyleSheet() {          
  23. var i, a;          
  24.     for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {          
  25.         if(a.getAttribute("rel").indexOf("style") != -1&&           
  26.            a.getAttribute("rel").indexOf("alt") == -1&& a.getAttribut("title"))           
  27.         return a.getAttribute("title");          
  28.     }          
  29.     return null;          
  30. }          
  31. function createCookie(name,value,days) {          
  32.     if (days) {          
  33.     var date = new Date();          
  34.     date.setTime(date.getTime()+(days*24*60*60*1000));          
  35.     var expires = ";        
  36.     expires="+date.toGMTString();          
  37.     }          
  38.     else expires = "";          
  39.     document.cookie = name+"="+value+expires+";  path=/";          
  40. }            
  41. function readCookie(name) {          
  42.     var nameEQ = name + "=";          
  43.     var ca = document.cookie.split(';');          
  44.     for(var i=0;i < ca.length;i++) {          
  45.         var c = ca[i];          
  46.     while (c.charAt(0)==' ') c = c.substring(1,c.length);          
  47.         if (c.indexOf(nameEQ) == 0)           
  48.             return c.substring(nameEQ.length,c.length);          
  49.     }          
  50.     return null;          
  51. }          
  52. window.onload = function(e) {          
  53.     var cookie = readCookie("style");          
  54.     var title = cookie ? cookie : getPreferredStyleSheet();          
  55.     setActiveStyleSheet(title);          
  56. }          
  57. window.onunload = function(e) {          
  58.     var title = getActiveStyleSheet();          
  59.     createCookie("style", title, 365);          
  60. }            
  61. var cookie = readCookie("style");          
  62. var title = cookie ? cookie :          
  63. getPreferredStyleSheet();          
  64. setActiveStyleSheet(title);     
分享到:
评论

相关推荐

    Qt css样式大全+详细书签pdf.zip

    其次,"Qt样式表武林秘籍.pdf"可能是一本更深入的Qt CSS样式指南,可能包含了大量的实例和技巧,帮助开发者从初级到高级全面掌握Qt样式表的使用。书中可能详细讲解了如何创建动态效果、响应式设计以及自定义控件的...

    js添加css样式小技巧

    ### js添加css样式小技巧 在前端开发过程中,经常需要使用JavaScript动态地为网页元素添加或修改CSS样式。本文将详细介绍几种使用JavaScript添加CSS样式的技巧,并解释它们的工作原理及适用场景。 #### 一、使用`...

    CSS样式论坛实例

    总之,"CSS样式论坛实例"是一个综合性的学习主题,涵盖了CSS3的基础知识、论坛设计的实用技巧,以及如何通过实例来加深理解。通过不断实践和探索,你将能够熟练运用CSS3为论坛或其他Web应用打造引人入胜的视觉效果和...

    CSS样式案例集大全

    **CSS样式案例集大全** 本资源集合是一份全面的CSS样式案例集,旨在帮助开发者深入理解和熟练运用CSS在实际项目中的应用。CSS(Cascading Style Sheets)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)...

    CSS样式漂亮Tab页

    "CSS样式漂亮Tab页"指的是利用CSS来创建美观且功能完善的Tab切换效果。Tab页是一种常见的用户界面元素,它允许用户在多个相关但独立的内容面板之间进行切换,而无需加载新的页面。 首先,我们需要理解CSS的基本概念...

    dreamweaver设计的简单的个人网页,包含独立CSS样式

    在本项目中,我们主要探讨的是使用Adobe Dreamweaver创建一个简单的个人网页,并结合独立的CSS样式进行设计。Dreamweaver是一款强大的可视化网页设计工具,它允许初学者和专业人士通过直观的界面快速构建和编辑HTML...

    简单的CSS样式导航菜单

    我们将讨论CSS的基本概念、选择器、布局技巧以及如何实现动态效果。 首先,让我们了解CSS的基础。CSS是一种样式语言,用于描述HTML或XML(包括SVG、MathML等)文档的呈现。它的主要任务是分离内容和表现,使网页...

    Dreamweaver样式切换的练习(包含脚本程序)

    通过这个练习,我们可以提升在Dreamweaver中应用和管理CSS样式的技巧。 首先,我们需要了解CSS的基本概念。CSS允许我们将样式规则与HTML或XML文档中的元素关联起来,使得我们可以独立于内容来调整页面的呈现方式。...

    风格清新漂亮的CSS3开关按钮样式

    我们将通过分析提供的`index2.html`和`index.html`文件以及相关的CSS样式来学习这一主题。 首先,让我们了解CSS3中的伪类和伪元素。这些是用于添加特殊效果的关键工具,例如`:checked`伪类可以检测复选框的状态,`:...

    Dreamweaver基础教程—使用Dreamweaver设计CSS样式

    ### Dreamweaver基础教程——使用Dreamweaver设计CSS样式 #### 一、Dreamweaver与CSS样式的历史背景 Dreamweaver是一款由Macromedia公司(后来被Adobe收购)开发的网页设计软件,自2002年的MX版本起,Dreamweaver...

    asp不同页面跳转(建立css样式)

    在探讨ASP不同页面跳转与CSS样式应用的过程中,我们首先需要理解ASP(Active Server Pages)是一种服务器端脚本环境,可以用来创建和运行动态、交互式Web应用程序。它使用HTML页面中的脚本命令来产生动态内容,这些...

    Css3图片切换

    总之,Css3图片切换是现代网页设计中的一个重要技巧,通过结合选择器、过渡和动画等特性,可以创造出各种独特的视觉效果,提高网站的互动性和吸引力。同时,随着技术的发展,未来的Css可能会带来更多的创新和可能性...

    CSS3切换导航条颜色样式插件.rar

    总之,“CSS3切换导航条颜色样式插件.rar”是一个学习和应用CSS3技巧的好资源,特别是对于想要掌握动态导航条设计的开发者来说。通过分析和实践这个插件,我们可以深入了解如何利用CSS3的特性创建吸引人的、互动性强...

    css 幻灯切换效果菜单

    幻灯切换效果是网页设计中常用的一种视觉技巧,它通常用于展示一系列图片或内容,通过自动或手动切换来呈现不同的信息。这种效果可以应用于首页大图轮播、产品展示等区域,而将其应用到菜单中则可以创新性地展现网站...

    选框CSS样式

    "选框CSS样式"就是针对这个问题提供的一种解决方案,通过纯CSS代码实现更加美观、具有吸引力的选框和复选框样式。 首先,我们来探讨如何用CSS自定义单选框和复选框的基本样式。HTML中的`&lt;input&gt;`元素用于创建这些...

    纯CSS内页内容切换选项卡.rar

    在“JS特效-css样式”的标签中,我们可以推测虽然这个示例不使用JavaScript来实现动态效果,但通常在实际项目中,JavaScript可能会用于增强功能,如添加动画过渡、响应式行为或者更复杂的用户交互。 从压缩包的...

    纯css3实现的tab标签切换效果

    在本文中,我们将深入探讨如何使用纯CSS3实现Tab标签切换效果。Tab切换是一种常见的用户界面设计...通过掌握这些技巧,开发者可以在不依赖JavaScript的情况下创建出响应式的Tab切换组件,提升网站或应用的用户体验。

    css样式表手册

    《CSS样式表手册》是一本全面且实用的CSS(Cascading Style Sheets)参考资料,旨在帮助开发者快速查询和理解CSS的各种属性、选择器以及布局技巧。CSS作为一种样式语言,是网页设计的核心技术之一,用于控制网页元素...

    CSS网站布局实录内含各色css布局样式

    本资源“CSS网站布局实录内含各色css布局样式”是一个全面的教程,旨在帮助初学者和经验丰富的开发者掌握各种CSS布局技巧。下面我们将深入探讨其中的关键知识点。 一、CSS基础 1. 选择器:CSS通过选择器来定位HTML...

    CSS标签切换代码实例教程 比较漂亮.

    【CSS标签切换】是一种网页设计中的布局技巧,它允许用户通过点击不同的标签或链接来切换显示不同的内容,而无需加载新的页面。这种技术被广泛应用于新闻网站、产品介绍页、文章分类展示等场景,能够有效地节省空间...

Global site tag (gtag.js) - Google Analytics