切换样式表

  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. nopCommerce 3.9 大波浪系列 之 事件机制（生产者、消费者）

    一.nop事件机制简介 应用场景:客户支付成功后,需要发送短信.邮件告知客户订单支付成功(短信.邮件由不同模块实现) 实现方法: 1.定义支付成功OrderPaidEvent事件. 2.定义短信,邮箱 ...

  2. 在Visual Studio 2017中发现的问题

    最近抽时间学习了一下 C# 6.0 的新特性,其中的一个新特性是 ?. 运算符,请看下面的一个简单示例: 当我故意修改成错误代码的时候,请接着看下面的示例: 我想把代码修改成list?[0].Coun ...

  3. (转)SqlServer基础之(触发器)（清晰易懂）

    阅读目录 一:触发器的优点 二:触发器的作用 三:触发器的分类 四:触发器的工作原理 五:创建触发器 六:管理触发器 概念:   触发器(trigger)是SQL server 提供给程序员和数据分析 ...

  4. jsp变量的使用规则

    jsp是一种弱类型的交而不能语音,虽然看似没有像强类型语言那么多的代码规范,但是在实际使用的过程当中依然有不少的问题.下面就简单的梳理一下. 1.首先,jsp是一种弱类型的脚本语言,变量在使用之前无需 ...

  5. java 基础知识及Servlet基础

  6. ETL作业调度软件TASKCTL4.1集群部署

    熟悉TASKCTL4.1一段时间后,觉得它的调度逻辑什么的都还不错,但是感觉单机部署不太够用.想实现跨机调度作业,就要会TASKCTL的集群部署.下面就是我在网上找到的相关资料,非原创. 单机部署成功 ...

  7. listView属性随笔－－不断增加中。

    对于一个控件的认识总是会随着时间的推移,而变的逐渐深刻. 简单的就 android:layout_height:属性来说给的数值不同就会有不同的效果,有些时候你根本想不到是跟这个属性的设置有关. 有时 ...

  8. Git的一些知识

    Git Git的特点: Git存储的是文件快照, 即整个文件内容, 并保存指向快照的索引 分布式 原理 这个之前面试实习的时候被问到过, 搞懂基本原理还是很重要的 Git的目录结构在执行git ini ...

  9. Linux常用脚本命令总结

    基本操作 通用操作 1. export 显示所有的环境变量,也可以获取到某个变量的详细信息: export # 显示所有 echo $SHELL # 只显示SHELL 2. whereis 使用系统自 ...

  10. hdu--1077--Catching Fish

    思路:   1.枚举两点确定圆心,大于2不用考虑   2.逐个判断判断距圆心的距离小于1.00001符合题意 这个题,主要在求圆心上废了不少功夫,但是仍存在问题 #include<iostrea ...