[JavaScript]JavaScript实现级联样式表,更换风格！

来源：互联网发布：室内设计师证书知乎编辑：程序博客网时间：2024/05/01 09:20

看到网上很多更换风格的代码，于是就有种想写的冲动！
奉献一个比较不错的方法！

好好欣赏下，有意见可以回帖评论下！

首先我们先来写个兼容Mozilla和MsIE的脚本。

复制内容到剪贴板

/ Mozilla兼容MsIE脚本，stylesheet扩展部分。o.stylesheet.addRule()/(function () {//如果CSSStyleSheet属性未定义，返回if (! window.CSSStyleSheet) return;//返回cssRules的私有方法function _ss_GET_rules_ () { return this.cssRules;}//CSSStyleSheet原型var _ss = CSSStyleSheet.prototype;//添加addRule方法_ss.addRule = function(sSelector, sRule) { this.insertRule(sSelector + "{" + sRule + "}", this.cssRules.length);}//利用defineGetter为CSSStyleSheet设置rules属性_ss.defineGetter("rules", _ss_GET_rules_);})();

这个是HTML文档的代码内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  <title>Example 14.2 结构与表现分离</title>  <link rel="stylesheet" href="left.css" mce_href="left.css" type="text/css" title="left"/>   <link rel="alternate stylesheet" href="right.css" mce_href="right.css" type="text/css" title="right"/></head><body>  <select onchange="alterStyleSheet(this.value)">   <option value="">--选择页面风格--</option>   <option value="left">left</option>   <option value="right">right</option>  </select>  <img id="Photo" alt="这是图片的位置"></img>  <p id="Content">酷吧论坛,sharp协会, 唯酷吧！唯我独尊，酷炫到底！做属于我们的论坛，更做属于我们的社区！sharp协会基于唯酷论坛致力于传播技术,让每位会员享受酷吧！ - 飞碟工作室酷吧论坛,sharp协会, 唯酷吧！唯我独尊，酷炫到底！做属于我们的论坛，更做属于我们的社区！sharp协会基于唯酷论坛致力于传播技术,让每位会员享受酷吧！ - 飞碟工作室酷吧论坛,sharp协会, 唯酷吧！唯我独尊，酷炫到底！做属于我们的论坛，更做属于我们的社区！sharp协会基于唯酷论坛致力于传播技术,让每位会员享受酷吧！ - 飞碟工作室酷吧论坛,sharp协会, 唯酷吧！唯我独尊，酷炫到底！做属于我们的论坛，更做属于我们的社区！sharp协会基于唯酷论坛致力于传播技术,让每位会员享受酷吧！ - 飞碟工作室酷吧论坛,sharp协会, 唯酷吧！唯我独尊，酷炫到底！做属于我们的论坛，更做属于我们的社区！sharp协会基于唯酷论坛致力于传播技术,让每位会员享受酷吧！ - 飞碟工作室</p>  <mce:script type="text/javascript"><!--   //这个函数根据选择的页面风格标题替换相应的样式   function alterStyleSheet(title){    if(!title) return;    var _links = document.getElementsByTagName("link");    for(var i = 0; i < _links.length; i++)    {     var a = _links[i];     if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title'))       //如果是对应的被选择的页面风格      //那么将相应的link标记的disable属性设置为false      //否则设置为true禁用该样式，确保了一次只启用一种样式      a.disabled = a.getAttribute('title') == title?false:true;    }   }  // --></mce:script> </body></html>

这是left样式表的内容：

这是right的样式表：

本文来自：http://vku88.5d6d.com/thread-592-1-1.html

源代码下载：请点击这里

搜索更多相关主题的帖子: JavaScript