前言：
1、我很懶！
2、寫樣式時，很多時候需要單獨設置長度、寬度、內間距、外間距等。於是，就會有很多CSS代碼會出現很多類似以下的代碼：
.w20: { width: 20px; }
.mt10: { margin-top: 10px; }
我遇到過有些頁面，只需要一個.w20的樣式，所以我是新建一個CSS文件來存放呢，還是直接寫在<head>里面呢 ... 請原諒選擇困難症患者 ...
3、自己寫的js插件（或者是將別人的插件重新包裝一次），一般來說至少會有兩個文件：xxx.css & xxx.js。於是每次使用時，<link>和<script>都需要配對書寫；
這次的目的就是，類似的CSS代碼，在某個地方，只在需要的時候會自動生成；引用外部樣式文件時，不需再手寫，也是在某個地方，只在需要的時候會自動引用；
別跟我討論什么seo，什么網頁加載渲染速度，我就是覺得這樣很方便。
正文：
做法就是，利用js代碼，在<head>中添加<style>或<link>標簽。沒錯，就這么簡單！
首先是核心代碼（以下所有js代碼均使用jquery庫）：
/* 加載CSS樣式 參數說明 paras: id -> 標簽ID default null css -> 樣式字符串 href -> 文件路徑 */ var loadCSS = function (paras) { var id = paras && paras.id ? paras.id : undefined; var css = paras && paras.css ? paras.css : undefined; var href = paras && paras.href ? paras.href : undefined; if (id && $('#' + id).length) { return; } var head = document.getElementsByTagName('head')[0]; if (css) { var style = document.createElement('style'); if (id) { style.id = id; } style.type = 'text/css'; try { if (style.styleSheet) { style.styleSheet.cssText += css; } else if (document.getBoxObjectFor) { style.innerHTML += css; } else { style.appendChild(document.createTextNode(css)) } } catch (ex) { style.cssText += css; } head.appendChild(style); } if (href) { if (!$('link[href="' + href + '"]').length) { var link = document.createElement('link'); if (id) { link.id = id; } link.rel = 'stylesheet'; link.type = 'text/css'; link.href = href; head.appendChild(link); } } }
這個方法的作用是：首先根據傳進來的ID，判斷是否已生成過；然后對傳進來的CSS代碼進行包裝合並，添加到<head>標簽的最尾端；再對傳進來的外部樣式文件路徑進行包裝合並，添加到<head>標簽的最尾端；
然后是自動生成CSS代碼部分：
/* 動態生成樣式 */ var CssList = []; var GenerateCSSRegs = { Width: /(w\d+p?)/g, Height: /(h\d+p?)/g, LineHeight: /(lh\d+)/g, Margin: /(m[trbl]?n?\d+)/g, Padding: /(p[trbl]?n?\d+)/g }; var autoGenerateIconStyle = function () { var css = '\n'; $('[class]').each(function () { var $e = $(this); var cssclass = $e.attr('class'); // WIDTH var result = cssclass.match(GenerateCSSRegs.Width); if (result && result.length) { $.each(result, function (i, v) { if (!CssList.contains(v)) { // 自己擴展的方法，同Linq if (v.contains('p')) { css += '.' + v + ' { width: ' + GetStringNumValue(v) + '%; }\n'; // GetStringNumValue 取出字符串中的數字；p結尾的值，代表百分比 } else { css += '.' + v + ' { width: ' + GetStringNumValue(v) + 'px; }\n'; } CssList.push(v); } }); } // HEIGHT // ... // LINEHEIGHT // ... // MARGIN result = cssclass.match(GenerateCSSRegs.Margin); if (result && result.length) { $.each(result, function (i, v) { if (!CssList.contains(v)) { var direction = v.contains('t') ? '-top' : v.contains('r') ? '-right' : v.contains('b') ? '-bottom' : v.contains('l') ? '-left' : ''; css += '.' + v + ' { margin' + direction + ': ' + (v.contains('n') ? '-' : '') + GetStringNumValue(v) + 'px; }\n'; // n開頭的值，代表負值 CssList.push(v); } }); } // PADDING // ... }); loadCSS({ css: css }); // 調用生成的方法 };
頁面元素中，依舊使用原來的寫法，js會根據寫的樣式，使用正則表達式判斷是否需要生成。
例如：<div class="w20 mt20 custom-css"></div>，js會判斷並自動生成.w20 & .mt20，而.custom-css並不在配置中，所以不會有這個樣式的生成。
根據書寫的值，包裝樣式，合並成字符串（相同的樣式只生成一次 - CssList控制）。最后，調用上面的方法，將樣式字符串傳入即可。
而自動加載部分，只需調用
loadCSS({ id: 'xxx', href: 'xxx.css' });
就行了，至於id和href的值，可以在其他地方進行配置。
所以，在頁面代碼中，我只需寫很少的代碼，卻可以達到相同的結果：
打開的頁面的源碼：
后話：
試過自動加載js文件，有些可以有些不行。至於為什么，自己去試試就知道了 ...