`

JavaScript动态添加样式表规则

    博客分类：
  • js
JavaScriptCSSIEFirebug脚本 
阅读更多

 

先给出函数。

 var addSheet = function(){
  var doc,cssCode;
  if(arguments.length == 1){
    doc = document;
    cssCode = arguments[0]
  }else if(arguments.length == 2){
    doc = arguments[0];
    cssCode = arguments[1];
  }else{
    alert("addSheet函数最多接受两个参数!");
  }
  if(!+"\v1"){//增加自动转换透明度功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜
    var t = cssCode.match(/opacity:(\d?\.\d+);/);
    if(t!= null){
      cssCode = cssCode.replace(t[0], "filter:alpha(opacity="+ parseFloat(t[1]) * 100+")")
    }
  }
  cssCode = cssCode + "\n";//增加末尾的换行符，方便在firebug下的查看。
  var headElement = doc.getElementsByTagName("head")[0];
  var styleElements = headElement.getElementsByTagName("style");
  if(styleElements.length == 0){//如果不存在style元素则创建
    if(doc.createStyleSheet){    //ie
      doc.createStyleSheet();
    }else{
      var tempStyleElement = doc.createElement('style');//w3c
      tempStyleElement.setAttribute("type", "text/css");
      headElement.appendChild(tempStyleElement);
    }
  }
  var  styleElement = styleElements[0];
  var media = styleElement.getAttribute("media");
  if(media != null && !/screen/.test(media.toLowerCase()) ){
    styleElement.setAttribute("media","screen");
  }
  if(styleElement.styleSheet){    //ie
    styleElement.styleSheet.cssText += cssCode;
  }else if(doc.getBoxObjectFor){
    styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加样式表字串
  }else{
    styleElement.appendChild(doc.createTextNode(cssCode))
  }
 }

有时我们需要在.js文件对文档动态引入一些CSS样式。对于一些短小的CSS代码来说，这好办，我们可以调用其style方法，如

var ddd = document.getElementById("ddd");
ddd.style.border = "1px solid red";

如果再长一点也无所谓：

var ddd = document.getElementById("ddd");
ddd.style.cssText = "border:1px solid red;color:#000;background:#444;float:left";

本人而言，我是喜欢后者。因为前者有严重的兼容问题 。如float这个样式，在IE是styleFloat，在火狐等W3C标准游览器是cssFloat。而cssText则是通吃。

如果很长，我们可以动态导入一CSS文件。如

function addSheetFile(path){
  var fileref=document.createElement("link")
  fileref.rel = "stylesheet";
  fileref.type = "text/css";
  fileref.href = path;
  fileref.media="screen";
  var headobj = document.getElementsByTagName('head')[0];
  headobj.appendChild(fileref);
}

这个函数在IE中有点累赘。我向来是支持哪个游览器就用哪个游览器的原生函数，直接使用二进制代码效率最高。

 var oStylesheet = document.createStyleSheet ( sURL , iIndex );

createStyleSheet带的两个参数都是可选的。

但如果我们的样式是某个页面独有的，而且只有管理 员才能使用到，而且那部分页面是动态生成的，我们需要一开始就引入它吗？需要特意弄个文件来装载它吗？最好的方法让这些样式与动态脚本捆绑在一起。我这个函数就为此而开发的。

坦白说，它最开始是为富文本编辑器而开发的。大家都知道，富文本输入框最流行的做法是把要输入的内容放到iframe中，这就涉及到两种 document，一个主页面的document，另一个是iframe的document。 iframe的document又涉及到兼容问题。我们可以：

      var iframe = document.createElement('iframe');//生成用于编辑的rich text editor
      var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
……

嘛，扯远了。总而言之，函数最开始的判定就是为这两种document而准备。如果没有涉及到iframe，我们只传入一个参数就行了。最后一个参数永远是CSS字符串。

然后是动态生成styleSheet元素，把CSS字符串加入到此元素的问题。当然如果有现阶段的，当然就用现成的。DOM元素越多对游览器的负担就越大。我们想到document.styleSheets方法。它返回一个集合，包含style元素与link元素，还涉及一兼容问题，如：

<!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" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <%# 强制IE8像IE7一样呈现网页 -%>
  <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
  <%#--默认所有的链接都在本窗口打开 -%>
  <base target="_self" />
  <title><%= h(yield(:title)) || controller.action_name  %></title>
  <%= stylesheet_link_tag "screen","button","style"  %>
  <link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print">
  <!--[if lt IE 8]>
   <link rel="stylesheet" href="/stylesheets/ie.css" type="text/css" media="screen">
  <![endif]-->
  <%= javascript_tag "window._token = '#{form_authenticity_token}'" if ActionController::Base.allow_forgery_protection %>
  <%= javascript_include_tag :defaults  %>
   <style type="text/css" media="print"></style>
 </head>

上面用alert(document.styleSheets.length);测试一下，IE返回6，W3C游览器返回5。因此，否决了它。而且我们只用到style元素，不使用外联。第二部分的判定就针对head中的style元素而言，没有就创建一个。然后我们把CSS字符串加在第一个 style元素就行了。

接着我们要加把保险锁，因为当media="print"时，只在页面打印时，定义的效果才有效。为了防止第一个style元素的media值不是screen，我们得改一改。

  var  styleElement = styleElements[0];
  var media = styleElement.getAttribute("media");
  if(media != null && !/screen/.test(media.toLowerCase()) ){
      styleElement.setAttribute("media", "screen");
  }

附上media的一些说明。

  • screen (缺省值)，提交到计算机屏幕；
  • print， 输出到打印机；
  • projection，提交到投影机；
  • aural，扬声器；
  • braille，提交到凸字触觉感知设备；
  • tty，电传打字机 (使用固定的字体)；
  • tv，电视机；
  • all，所有输出设备。

最后是如此添加的问题。分IE，火狐与其他游览器三种。判定游览器也用各自的私有属性或方法。如styleSheet是IE独用的，getBoxObjectFor是火狐独用的（当然你也可以使用(/firefox /.test(navigator.userAgent.toLowerCase())），通常DOM操作是最耗时的，能用私有就用私有！

使用方法。

addSheet("\
 .RTE_iframe{width:600px;height:300px;}\
 .RTE_toolbar{width:600px;}\
 .color_result{width:216px;}\
 .color_view{width:110px;height:25px;}\
 .color_code{text-align:center;font-weight:700;color:blue;font-size:16px;}\
 div.table{width:176px;position:absolute;padding:1px;}\
 div.table td{font-size:12px;color:red;text-align:center;}\
" );*/

对比一下51js的客服果果脚本，更短小，但是它会可能会创建多个style元素，还有一些效率的问题……毕竟我这个最初是为开发富文本编辑而开发的，功能不强大不行啊！

/*
动态添加样式表的规则
*/
iCSS={add:function(css){
      var D=document,$=D.createElement('style');
      $.setAttribute("type","text/css");
      $.styleSheet&&($.styleSheet.cssText=css)||
              $.appendChild(D.createTextNode(css));
      D.getElementsByTagName('head')[0].appendChild($);
}};
iCSS.add("\
      .dhoooListBox,.dhoooListBox li{margin:0;padding:0;list-style-type:none;font-size:12px;cursor:default}\
      .dhoooListBox{border:1px solid #aaa;width:180px;background:#eee;height:200px;overflow:auto;float:left}\
      .dhoooListBox li{margin:5px;line-height:24px;background:url(images/smilies/time.gif) no-repeat 0 60%;padding-left:25px;color:#555;}\
      .dhoooListBox li.selected{background-color:#FFCC33}\
");

最后追加几个相关的方法:

var getClass = function(ele) {
  return ele.className.replace(/\s+/,' ').split(' ');
};
var hasClass = function(ele,cls) {
  return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
var addClass = function(ele,cls) {
  if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
var removeClass = function(ele,cls) {
  if (hasClass(ele,cls)) {
      var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
      ele.className=ele.className.replace(reg,' ');
  }
}
分享到：
| JavaScript测试函数运行速度
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    再谈javascript 动态添加样式规则 W3C校检

    JavaScript 动态添加样式规则是前端开发中一种常见的技术，特别是在需要实时调整元素样式或创建交互效果时。本文将深入探讨如何使用JavaScript来动态添加、修改和管理样式规则，并确保这些规则符合W3C标准。 首先，...

    用法JavaScript创建新样式表和新样式规章_.docx

    通过动态地添加或删除样式表中的规则，而不是逐个修改DOM元素的样式，可以更有效地管理页面样式，尤其在处理大量元素时更为高效。下面将详细介绍如何使用JavaScript来创建新的样式表和样式规则。 首先，要获取页面...

    使用JavaScript创建新样式表和新样式规则

    通过JavaScript动态地创建和修改样式表和样式规则，可以为页面元素赋予不同的视觉效果，提升网页的动态性和响应性。 首先，要理解JavaScript中的样式表和样式规则，需要了解一些基本概念。CSSStyleSheet对象代表了...

    javascript动态添加样式(行内式/嵌入式/外链式等规则)

    a) 动态引入样式表文件 JavaScript可以用来动态地从外部引入CSS文件。以下是实现此功能的一个示例函数，该函数接受一个URL作为参数，并将其作为样式表插入到标签中： ```javascript function loadLink(url) { var ...

    javascript 动态修改样式和层叠样式表代码

    此外，还可以使用`insertRule`和`deleteRule`方法在CSS样式表中动态添加或删除规则。例如，要在样式表中插入一条新规则： ```javascript document.styleSheets[0].insertRule('.highlight { background-color: ...

    用js动态改变css样式表.docx

    - 另一种方法是直接在JavaScript中创建新的`&lt;style&gt;`元素，然后将CSS规则插入到文档的`&lt;head&gt;`部分，但这通常用于添加少量的动态样式，而不是切换整个样式表。 总的来说，通过JavaScript动态改变CSS样式表，开发者...

    用JavaScript动态建立或增加CSS样式表的实现方法

    ### 方法二：避免重复添加样式表 在实际应用中，为了避免重复创建相同的样式表，我们可以使用一个ID来唯一标识样式表，并在创建前进行检查。以下是带有检查机制的代码： ```javascript if (!document.styleSheets...

    javascript 动态样式添加的简单实现

    异步加载CSS模块则可以理解为在页面渲染完成后，根据某些条件或用户交互动态地添加样式规则，这样做可以为不同的页面状态或元素应用不同的样式。 知识点五：兼容性处理的重要性 文章最后提到，由于不同浏览器间存在...

    JavaScript实现动态创建CSS样式规则方案

    当我们需要向现有的样式表中动态添加样式规则时，可以使用CSSStyleSheet对象的insertRule方法。这个方法允许我们传入一个CSS规则字符串，并指明规则插入的位置。例如，sheet.insertRule("header{float:left;opacity:...

    再谈动态添加样式规则的方法

    【动态添加样式规则的方法】 在Web开发中，样式与结构的分离是提高代码可维护性和重用性的重要原则。通常，我们会将样式规则写入单独的CSS文件中，然后通过`&lt;link&gt;`标签导入到HTML文档中。然而，面对一些特殊场景，...

    样式表的规则

    标题提到“样式表的规则”，这通常指的是CSS（层叠样式表）用于网页设计的一系列规则，而描述及部分内客则主要讨论了JavaScript中数组的创建、操作、属性等知识点。尽管如此，我们将依据给定内容来详细阐述...

    JavaScript动态生成css

    创建了`&lt;style&gt;`元素后，我们可以通过`sheet`属性来访问它的CSS样式表，并添加规则。例如： ```javascript style.sheet.insertRule('.myClass { color: red; }', 0); ``` 这将在样式表中插入一条新的CSS规则，设置...

    第六章 使用DOM操作样式表

    第六章主要讲解的是如何使用DOM（Document Object Model）来操作网页中的样式表，特别是通过JavaScript实现动态样式控制。DOM是HTML和XML文档的一种结构化表示，允许程序和脚本动态更新、添加、删除和改变元素及其...

    通过JS动态向网页中添加CSS样式语句代码

    2. **使用`document.styleSheets`**：JavaScript还提供了`document.styleSheets`属性，它是一个包含所有已加载样式表的列表。你可以向这个列表添加新的CSS规则。例如： ```javascript let sheet = document.style...

    Change Stylesheet in Javascript.zip

    在JavaScript中，改变样式表（Stylesheet）是前端开发中常见的任务，这涉及到动态更新页面的外观和布局。本教程将深入探讨如何在JavaScript中操作CSS样式表，以实现动态效果，尤其关注游戏场景中的应用。 首先，...

Magicbox
Global site tag (gtag.js) - Google Analytics