您当时的方位:主页 > 言语编程 > JavaScript

JS函数:动态增加CSS款式表

2014-11-02  

先给出函数。

01.var addSheet = function(){
02.  var doc,cssCode;
03.  if(arguments.length == 1){
04.    doc = document;
05.    cssCode = arguments[0]
06.  }else if(arguments.length == 2){
07.    doc = arguments[0];
08.    cssCode = arguments[1];
09.  }else{
10.    alert("addSheet函数最多承受两个参数!");
11.  }
12.  if(!+"/v1"){//增加主动转化通明度功用,用户只需输入W3C的通明款式,它会主动转化成IE的通明滤镜
13.    var t = cssCode.match(/opacity:(/d?/./d+);/);
14.    if(t!= null){
15.      cssCode = cssCode.replace(t[0], "filter:alpha(opacity="+ parseFloat(t[1]) * 100+")")
16.    }
17.  }
18.  cssCode = cssCode + "/n";//增加结尾的换行符,方便在firebug下的检查。
19.  var headElement = doc.getElementsByTagName("head")[0];
20.  var styleElements = headElement.getElementsByTagName("style");
21.  if(styleElements.length == 0){//假如不存在style元素则创立
22.    if(doc.createStyleSheet){    //ie
23.      doc.createStyleSheet();
24.    }else{
25.      var tempStyleElement = doc.createElement('style');//w3c
26.      tempStyleElement.setAttribute("type", "text/css");
27.      headElement.appendChild(tempStyleElement);
28.    }
29.  }
30.  var  styleElement = styleElements[0];
31.  var media = styleElement.getAttribute("media");
32.  if(media != null && !/screen/.test(media.toLowerCase()) ){
33.    styleElement.setAttribute("media","screen");
34.  }
35.  if(styleElement.styleSheet){    //ie
36.    styleElement.styleSheet.cssText += cssCode;
37.  }else if(doc.getBoxObjectFor){
38.    styleElement.innerHTML += cssCode;//火狐支撑直接innerHTML增加款式表字串
39.  }else{
40.    styleElement.appendChild(doc.createTextNode(cssCode))
41.  }
42.}

有时咱们需求在.js文件对文档动态引进一些CSS款式。关于一些矮小的CSS代码来说,这好办,咱们能够调用其style办法,如

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

假如再长一点也无所谓:

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

自己而言,我是喜爱后者。由于前者有严峻的兼容问题。如float这个款式,在IE是styleFloat,在火狐等W3C规范游览器是cssFloat。而cssText则是通吃。

假如很长,咱们能够动态导入一CSS文件。如

01.function addSheetFile(path){
02.    var fileref=document.createElement("link")
03.    fileref.rel = "stylesheet";
04.    fileref.type = "text/css";
05.    fileref.href = path;
06.    fileref.media="screen";
07.    var headobj = document.getElementsByTagName('head')[0];
08.    headobj.appendChild(fileref);
09.} 这个函数在IE中有点担负。我向来是支撑哪个游览器就用哪个游览器的原生函数,直接运用二进制代码功率最高。
1.var oStylesheet = document.createStyleSheet ( sURL , iIndex );

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

但假如咱们的款式是某个页面独有的,并且只要管理员才干运用到,并且那部分页面是动态生成的,咱们需求一开端就引进它吗?需求特意弄个文件来装载它吗?最好的办法让这些款式与动态脚本绑缚在一起。我这个函数就为此而开发的。

坦白说,它最开端是为富文本修改器而开发的。咱们都知道,富文本输入框最盛行的做法是把要输入的内容放到iframe中,这就触及到两种document,一个主页面的document,另一个是iframe的document。 iframe的document又触及到兼容问题。咱们能够:

1.        var iframe = document.createElement('iframe');//生成用于修改的rich text editor
2.        var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
3.……

嘛,扯远了。总而言之,函数最开端的断定便是为这两种document而预备。假如没有触及到iframe,咱们只传入一个参数就行了。最终一个参数永远是CSS字符串。

然后是动态生成styleSheet元素,把CSS字符串参加到此元素的问题。当然假如有现阶段的,当然就用现成的。DOM元素越多对游览器的担负就越大。咱们想到document.styleSheets办法。它回来一个调集,包括style元素与link元素,还触及一兼容问题,如:

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
02."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04.  <head>
05.    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
06.    <%# 强制IE8像IE7相同出现网页 -%>
07.    <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
08.    <%#--默许一切的链接都在本窗口翻开 -%>
09.    <base target="_self" />
10.    <title><%= h(yield(:title)) || controller.action_name  %></title>
11.    <%= stylesheet_link_tag "screen","button","style"  %>
12.    <link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print">
13.    <!--[if lt IE 8]>
14.     <link rel="stylesheet" href="/stylesheets/ie.css" type="text/css" media="screen">
15.    <![endif]-->
16.    <%= javascript_tag "window._token = '#{form_authenticity_token}'" if ActionController::Base.allow_forgery_protection %>
17.    <%= javascript_include_tag :defaults  %>
18.     <style type="text/css" media="print"></style>
19.  </head>

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

接着咱们要加把稳妥锁,由于当media="print"时,只在页面打印时,界说的作用才有用。为了避免第一个style元素的media值不是screen,咱们得改一改。

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

附上media的一些阐明。

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

最终是如此增加的问题。分IE,火狐与其他游览器三种。断定游览器也用各自的私有特点或办法。如styleSheet是IE独用的,getBoxObjectFor是火狐独用的(当然你也能够运用(/firefox/.test(navigator.userAgent.toLowerCase())),一般DOM操作是最耗时的,能用私有就用私有!

 

运用办法:

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

比照一下51js的客服果果脚本,更矮小,可是它会可能会创立多个style元素,还有一些功率的问题……究竟我这个开端是为开发富文本修改而开发的,功用不强大不可啊!

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

最终追加几个相关的办法:

01.var getClass = function(ele) {
02.    return ele.className.replace(//s+/,' ').split(' ');
03.};
04.var hasClass = function(ele,cls) {
05.    return ele.className.match(new RegExp('(//s|^)'+cls+'(//s|$)'));
06.}
07.var addClass = function(ele,cls) {
08.    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
09.}
10.var removeClass = function(ele,cls) {
11.    if (hasClass(ele,cls)) {
12.        var reg = new RegExp('(//s|^)'+cls+'(//s|$)');
13.        ele.className=ele.className.replace(reg,' ');
14.    }
15.}