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'));
    	};
    })();
    
  • 相关阅读:
    VUE 多页面配置(二)
    VUE 多页面配置(一)
    VUE (vue-cli)脚手架项目说明
    CSS 三角形与圆形
    协同过滤算法之组合加权评分
    用户投票算法
    Android开发学习总结(一)——搭建最新版本的Android开发环境
    关于统计变换(CT/MCT/RMCT)算法的学习和实现
    SIFT 特征提取算法总结
    Android Listener侦听的N种写法
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1972221.html
Copyright © 2011-2022 走看看