切换样式表

  1. html页 
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 <html xmlns="http://www.w3.org/1999/xhtml"> 

 <head> 

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

 <title>样式表切换</title> 

 <link href="css/default.css" type="text/css" rel="stylesheet" rev="stylesheet" title="default" /> 

 <link href="css/alternate.css" type="text/css" rel="alternate stylesheet" rev="alternate" title="alternate" /> 

 <script src="javascript/样式切换.js" type="text/javascript" language="javascript"> 

 </script> 

 </head> 

 <body> 

 <!—设置样式表表为默认样式表 --> 

 <input type="button" value="style1" onclick="setActiveStyleSheet('default');" /> 

 <!--设置样式表表为可选样式表 --> 

 <input type="button" value="style2" onclick="setActiveStyleSheet('alternate');" /> 

 <!—获取当前样式表的对应 title --> 

 <input type="button" value="get stylesheet" onclick="getActiveStyleSheet('alternate');" /> 

 </body> 

 </html>

    Html代码

  2. default.css 
     body 

 { 

     background-color:green; 

 }

alternate.css

 body

 {

     background-color:blue;

 }
样式切换.js 
 // JavaScript Document 

 function setActiveStyleSheet(title) { 

 var i, a; 

 if (title) 

  { 

     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) alert(a.getAttribute('title')); 

 } 

 }

利用JavaScript来切换样式表的更多相关文章

  1. JavaScript对css样式表操作

    CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...

  2. javascript选项卡切换样式

    HTML代码 <ul class="touzi_xuan1" id="qixian"> <li>****: </li> &l ...

  3. javascript修改css样式表

    //创建var sheet=document.createElement('style');document.bodt.appendChild(sheet);sheet.styleSheet.cssT ...

  4. css样式表的知识点总结

    css总的来说有三种css样式可供选择: 1,行内样式表 行内样式表,直接写在了html文件的元素中,例如: <div style="color:red;"></ ...

  5. JavaScript访问修改css样式表

    1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...

  6. JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)

    层叠样式 表和动态HTML   层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准.     使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...

  7. JavaScript的DOM_StyleSheet操作内联或链接样式表

    使用 style 属性,仅仅只能获取和设置行内的样式,如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了,使用 getComputedStyle 和cur ...

  8. JavaScript编程：使用DOM操作样式表

    6.使用DOM操作样式表: 操纵元素的Style样式属性:         background-color:style.backgroundColor         color:style.col ...

  9. Javascript高级编程学习笔记（51）—— DOM2和DOM3（3）操作样式表

    操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...

随机推荐

  1. UWP中使用Composition API实现吸顶（2）

    在上一篇中我们讨论了不涉及Pivot的吸顶操作,但是一般来说,吸顶的部分都是Pivot的Header,所以在此我们将讨论关于Pivot多个Item关联同一个Header的情况. 老样子,先做一个简单的 ...

  2. Ubuntu上安装PHP环境-mysql+apache+php-Linux操作系统

    安装MYSQL   1. sudo apt-get install mysql-server 或者 apt-get isntall mysql-client   2. 安装过程中会提示设置密码,注意设 ...

  3. JavaScript 学习推荐

    主要是个人的学习网站,书籍推荐,还有个人学习经历,以及一些学习经验或技巧 JavaScript学习网站推荐 如果想快速入门,这些是很推荐的网站      快速入门,很快能让你了解前端,有什么,做什么, ...

  4. Java 9 揭秘（17. Reactive Streams）

    Tips 做一个终身学习的人. 在本章中,主要介绍以下内容: 什么是流(stream) 响应式流(Reactive Streams)的倡议是什么,以及规范和Java API 响应式流在JDK 中的AP ...

  5. .Net 内存池

    最近在开发 Pinpoint .Net 客户端,和服务端通信都是通过 TCP 或者 UDP,需要处理大量的 Byte 数据,使用 .Net Framework 只能通过 new Byte[] 的方式申 ...

  6. 【TOP】top命令的load average的意义

    一. 怎么查看机器负载 uptime 命令: $uptime 14:32:32 up 108 days, 23:04, 17 users,  load average: 0.06, 0.08, 0.0 ...

  7. Cubieboard Linaro 搭建超节能监控平台

    转载的,不知道原作者是谁.list很好,但我没有全部测试和验证,部分内容或已失效,如有人找到原作者的更新或者最新的心得.请告知. Cubieboard是一款ARM架构的开发板, 1GHz 的 All ...

  8. JSP制作简单登陆

    JSP制作简单登陆界面 运行环境 eclipse+tomcat+MySQL 不知道的可以参考Jsp运行环境--Tomcat 项目列表 这里我先把jsp文件先放在Web-INF外面访问 需要建立的几个文 ...

  9. sybase数据库和oracle数据库中字段中含有换行符的解决办法

    最近在做数据库从sybase到oracle的迁移工作,sybase数据库表bcp导出后,通过sqlldr导入到oracle数据库,然后oracle数据库通过spool按照sybase数据库bcp的格式 ...

  10. 如何把我的Java程序变成exe文件？

    JAVA是一种“跨平台”的语言,拥有“一次编写,处处运行”的特点,让它成为当今IT行业,必不可少的一门编程语言.每一个软件开发完成之后,应该大家都需要打包程序并发送给客户,常见的方式:java程序打成 ...