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'));
    	};
    })();
    
  • 相关阅读:
    setStyleSheet来设定窗口部件的样式
    Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())
    Qt编程—去掉标题栏和设置窗口透明用法
    php设计模式总结
    典型的MVC架构图
    搜索引擎设计分析
    社区论坛设计分析
    (二) vim的Tabbar插件
    目录结构设计分析
    用户注册系统分析
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1972221.html
Copyright © 2011-2022 走看看