zoukankan      html  css  js  c++  java
  • 动态添加样式表规则第3版

    可以点以下链接看原先的实现与讨论。本版本主要修bug与通过缓存一些对象提高效率:

    《动态添加样式表规则》《再谈动态添加样式规则》

    //2011.3.6 by 司徒正美
          ;;;(function(WIN,DOM){
            this.dom = this.dom || {};
            var reg_media = /screen|all/i, reg_opacity = /opacity:\s*(\d?\.\d+)/g
            dom.addSheet = function(css , appendTo){
              var self = arguments.callee,style ,el = appendTo || DOM.body
              if(!self.style){
                var styles = DOM.getElementsByTagName("style"), i = 0, media
                while(style = styles[i++]){
                  media = style.getAttribute("media");
                  if(media === null || reg_media.test(media)){
                    self.style = style;
                    break;
                  }
                }
                if(!self.style){
                  style = DOM.createElement('style');
                  el.appendChild(style);
                  self.style = style;
                }
              }
              if(!-[1,] && el.filters){//IE6-8
                css = css.replace(reg_opacity,function($,$1){
                  $1 = parseFloat($1) * 100;
                  if($1 < 0 || $1 > 100)
                    return "";
                  return "filter:alpha(opacity="+ $1 +");"
                });
              }
              css += "\n";//增加末尾的换行符,方便在firebug下的查看。
              if(style.styleSheet){    //ie
                style.styleSheet.cssText += css;//添加新的内部样式
              }else if(WIN.Components){
                style.innerHTML += css;//火狐支持直接innerHTML添加样式表字串
              }else{
                style.appendChild(DOM.createTextNode(css))
              }
            }
          })(this,this.document)
    

    使用方法:

       dom.addSheet("body{background:#666;color:#fff;}")
    
    var addCSS = (function(){
    	var style = document.createElement('style');
    	style.type = 'text/css';
    	var root = document.getElementsByTagName('head')[0] || document.body;
    	root.appendChild(style);
    	return function(css){
    		style.appendChild(document.createTextNode(css+'\n'));
    	};
    })();
    
  • 相关阅读:
    JS调用App方法及App调用JS方法
    提升用户体验之 选用合适的鼠标光标
    js仿QQ拖拽删除
    Linux下安装 mongodb
    QQ分享-定制分享卡片
    js判断浏览器语言实现网站国际化
    js复制内容到剪切板
    为什么会有堆内存和栈内存之分
    Avro实现RPC
    zookeeper学习day01
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1972221.html
Copyright © 2011-2022 走看看