ダイナミックスタイル要素の追加
3831 ワード
/**
* @description IE6~9 , :
* 1)link+style 31 ;
* 2) css rule , 4095 ;
* 3)<pre>@import</pre> 4 。
*
* link/style , 1 。
* @author shawnwu
* @date 2013-09-03
*/
(function(win){
var doc = document,
head = document.getElementsByTagName("head")[0],
linkEls = doc.getElementsByTagName("link"),
styleEls = doc.getElementsByTagName("style"),
poorIE = /MSIE ([^;]+)/.test(navigator.userAgent) && parseInt(RegExp.$1,10) < 10,
IMPORT_ID = "importLink_ID",
APPEND_ID = "appendStyle_ID",
/**
* IE6~9 BUG:link+style , 31 。
*/
LIMIT = 31,
// style : import, append
maxNum = LIMIT - 2,
isLimited = false;
/**
* @description LINK
* @param {String} url
* @return link
*/
function createLinkEl(url){
var link = doc.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
head.appendChild(link);
return link;
}
/**
* @description style
* @param {String} str
* @param {String} id ID
* @return style
*/
function createStyleEl(str,id){
var el = doc.createElement("style");
el.type = "text/css";
if(id){
el.id = id;
}
if(str){
if(poorIE){
el.styleSheet.cssText = str; //IE
}else{
el.appendChild(document.createTextNode(str));
}
}
head.appendChild(el);
return el;
}
function checkLimit(){
if(!isLimited && poorIE){
if(linkEls.length + styleEls.length >= maxNum){
isLimited = true;
}
}
return isLimited;
}
function loadStyle(url){
if(checkLimit()){
doImportStyle(url);
}else{
doLoadStyle(url);
}
}
function loadStyleStr(str){
if(checkLimit()){
doAppendStr(str);
}else{
doLoadStr(str);
}
}
function doLoadStr(str){
createStyleEl(str);
}
function doAppendStr(str){
var el = doc.getElementById(APPEND_ID);
if(!el){
createStyleEl(str,APPEND_ID);
}else{
el.styleSheet.cssText = el.styleSheet.cssText + str;
}
}
function doImportStyle(url){
var el = doc.getElementById(IMPORT_ID),
styleEl = null;
if(!el){
styleEl = createStyleEl(null,IMPORT_ID);
styleEl.styleSheet.addImport(url);
}else{
el.styleSheet.addImport(url);
}
}
function doLoadStyle(url){
createLinkEl(url)
}
//export
win.cssUtil = {
// css
loadStyle: loadStyle,
//
loadStyleStr: loadStyleStr
};
})(window);