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

最新推荐文章于 2022-02-17 14:00:05 发布

勿忘心安Billy

最新推荐文章于 2022-02-17 14:00:05 发布

阅读量963

点赞数

分类专栏： JavaScript 文章标签： javascript stylesheet mozilla function 工作 html

本文链接：https://blog.csdn.net/qq415734794/article/details/4182451

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

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

首先我们先来写个兼容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