CSS.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:5k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.util.CSS
  3.  * Utility class for manipulating CSS rules
  4.  * @singleton
  5.  */
  6. Ext.util.CSS = function(){
  7. var rules = null;
  8.     var doc = document;
  9.     var camelRe = /(-[a-z])/gi;
  10.     var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
  11.    return {
  12.    /**
  13.     * Creates a stylesheet from a text blob of rules.
  14.     * These rules will be wrapped in a STYLE tag and appended to the HEAD of the document.
  15.     * @param {String} cssText The text containing the css rules
  16.     * @param {String} id An id to add to the stylesheet for later removal
  17.     * @return {StyleSheet}
  18.     */
  19.    createStyleSheet : function(cssText, id){
  20.        var ss;
  21.        var head = doc.getElementsByTagName("head")[0];
  22.        var rules = doc.createElement("style");
  23.        rules.setAttribute("type", "text/css");
  24.        if(id){
  25.            rules.setAttribute("id", id);
  26.        }
  27.        if(Ext.isIE){
  28.            head.appendChild(rules);
  29.            ss = rules.styleSheet;
  30.            ss.cssText = cssText;
  31.        }else{
  32.            try{
  33.                 rules.appendChild(doc.createTextNode(cssText));
  34.            }catch(e){
  35.                rules.cssText = cssText;
  36.            }
  37.            head.appendChild(rules);
  38.            ss = rules.styleSheet ? rules.styleSheet : (rules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
  39.        }
  40.        this.cacheStyleSheet(ss);
  41.        return ss;
  42.    },
  43.    /**
  44.     * Removes a style or link tag by id
  45.     * @param {String} id The id of the tag
  46.     */
  47.    removeStyleSheet : function(id){
  48.        var existing = doc.getElementById(id);
  49.        if(existing){
  50.            existing.parentNode.removeChild(existing);
  51.        }
  52.    },
  53.    /**
  54.     * Dynamically swaps an existing stylesheet reference for a new one
  55.     * @param {String} id The id of an existing link tag to remove
  56.     * @param {String} url The href of the new stylesheet to include
  57.     */
  58.    swapStyleSheet : function(id, url){
  59.        this.removeStyleSheet(id);
  60.        var ss = doc.createElement("link");
  61.        ss.setAttribute("rel", "stylesheet");
  62.        ss.setAttribute("type", "text/css");
  63.        ss.setAttribute("id", id);
  64.        ss.setAttribute("href", url);
  65.        doc.getElementsByTagName("head")[0].appendChild(ss);
  66.    },
  67.    
  68.    /**
  69.     * Refresh the rule cache if you have dynamically added stylesheets
  70.     * @return {Object} An object (hash) of rules indexed by selector
  71.     */
  72.    refreshCache : function(){
  73.        return this.getRules(true);
  74.    },
  75.    // private
  76.    cacheStyleSheet : function(ss){
  77.        if(!rules){
  78.            rules = {};
  79.        }
  80.        try{// try catch for cross domain access issue
  81.            var ssRules = ss.cssRules || ss.rules;
  82.            for(var j = ssRules.length-1; j >= 0; --j){
  83.                rules[ssRules[j].selectorText] = ssRules[j];
  84.            }
  85.        }catch(e){}
  86.    },
  87.    
  88.    /**
  89.     * Gets all css rules for the document
  90.     * @param {Boolean} refreshCache true to refresh the internal cache
  91.     * @return {Object} An object (hash) of rules indexed by selector
  92.     */
  93.    getRules : function(refreshCache){
  94.     if(rules === null || refreshCache){
  95.     rules = {};
  96.     var ds = doc.styleSheets;
  97.     for(var i =0, len = ds.length; i < len; i++){
  98.         try{
  99.              this.cacheStyleSheet(ds[i]);
  100.          }catch(e){} 
  101.         }
  102.     }
  103.     return rules;
  104.     },
  105.    
  106.     /**
  107.     * Gets an an individual CSS rule by selector(s)
  108.     * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
  109.     * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
  110.     * @return {CSSRule} The CSS rule or null if one is not found
  111.     */
  112.    getRule : function(selector, refreshCache){
  113.     var rs = this.getRules(refreshCache);
  114.     if(!Ext.isArray(selector)){
  115.         return rs[selector];
  116.     }
  117.     for(var i = 0; i < selector.length; i++){
  118. if(rs[selector[i]]){
  119. return rs[selector[i]];
  120. }
  121. }
  122. return null;
  123.     },
  124.    
  125.    
  126.     /**
  127.     * Updates a rule property
  128.     * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
  129.     * @param {String} property The css property
  130.     * @param {String} value The new value for the property
  131.     * @return {Boolean} true If a rule was found and updated
  132.     */
  133.    updateRule : function(selector, property, value){
  134.     if(!Ext.isArray(selector)){
  135.     var rule = this.getRule(selector);
  136.     if(rule){
  137.     rule.style[property.replace(camelRe, camelFn)] = value;
  138.     return true;
  139.     }
  140.     }else{
  141.     for(var i = 0; i < selector.length; i++){
  142.     if(this.updateRule(selector[i], property, value)){
  143.     return true;
  144.     }
  145.     }
  146.     }
  147.     return false;
  148.     }
  149.    };
  150. }();