Javascript dynamic style adding (intra-row/Embedded/external chain Rules)

CSS can be added in-row, embedded, external chain, and pilot type.
A) dynamically introduce the style sheet file: Copy codeThe Code is as follows: function loadLink (url ){
Var link = document. createElement ("link ");
Link. type = "text/css ";
Link. rel = "stylesheet ";
Link. href = url;
Var head = document. getElmentsByTagName ("head") [0];
Head. appendChild (link );
}

B) embedded:Copy codeThe Code is as follows: function insertStyles (){
Var doc, cssCode = [], cssText;
Var len = arguments. length;
Var head, style, firstStyle;
If (len = 1 ){
Doc = document;
CssCode. push (arguments [0])
} Else if (len = 2 ){
Doc = arguments [0];
CssCode. push (arguments [1]);
} Else {
Alert ("the function can receive up to two parameters! ");
}
Head = doc. getElementsByTagName ("head") [0];
Styles = head. getElementsByTagName ("style ");
If (styles. length = 0 ){
If (doc. createStyleSheet) {// ie
Doc. createStyleSheet ();
} Else {// FF
Var tempStyle = doc. createElement ("style ");
TempStyle. setatti.pdf ("type", "text/css ");
Head. appendChild (tempStyle );
}
}
FirstStyle = styles [0];
CssText = cssCode. join ("\ n ");
If (! + "\ V1") {// opacity compatibility
Var str = cssText. match (/opacity :( \ d? \. \ D + );/);
If (str! = Null ){
CssText = cssText. replace (str [0], "filter: alpha (opacity =" + pareFloat (str [1]) * 100 + ")");
}
}
If (firstStyle. styleSheet ){
FirstStyle.styleSheee.css Text + = cssText;
} Else if (doc. getBoxObjectFor ){
FirstStyle. innerHTML + = cssText;
} Else {
FirstStyle. appendChild (doc. createTextNode (cssText ));
}
}

C) inline:Copy codeCode: var addStyle = function (ele, str ){
Var s = ele. getAttribute ("style"), styles;
If (str & typeof str = "string "){
If (! S ){
Ele.style.css Text = str;
} Else {
If (s = '[object]') {// IE6/7 e. getAttribute ("style") Returns [object]
S=ele.style.css Text;
}
Styles = trim (s). split (";");
For (var I = 0, len = styles. length; I <len; I ++ ){
Var style_ I = trim (styles [I]);
Var attr = style_ I .split (":") [0];
If (str. indexOf (attr)>-1 ){
Styles [I] = "";
} Else {
Styles [I] = style_ I;
}
}
Ele.style.css Text = styles. join ("") + ";" + str;
}
}
}

D) import:
Import "index.css ";
Methods related to CSS operations:Copy codeThe Code is as follows: var hasClass = function (ele, value ){
Var rclass =/[\ n \ t \ r]/g,
Value = "" + value + "";
Return (ele. nodeType = 1) & ("" + ele. className + ""). replace (rclass, ""). indexOf (value)>-1;
}
Var trim = function (val ){
Return val. replace (/(^ \ s +) | (\ s + $)/g ,"");
}
Var addClass = function (ele, value ){
Var rspace =/\ s +/, classNames, getClass;
If (value & typeof value = "string "){
ClassNames = value. split (rspace );
If (ele. nodeType = 1 ){
If (! Ele. className & classNames. length = 1 ){
Ele. className = value;
} Else {
GetClass = "" + ele. className + "";
For (var I = 0, len = classNames. length; I <len; I ++ ){
Var cname = classNames [I];
If (! HasClass (ele, cname )){
GetClass + = cname + "";
}
}
Ele. className = trim (getClass );
}
}
}
}
Var removeClass = function (ele, value ){
Var rclass =/[\ n \ t \ r]/g, classNames, getClass;
If (value & typeof value = "string") | value = undefined ){
ClassNames = (value | ""). split (rspace );
If (ele. nodeType ===1 & ele. className ){
If (value) {// There is a search for the class to be removed
GetClass = "" + ele. className + "". replace (rclass, ""); // left and right spaces. To ensure equality among classes, it is convenient to replace later
For (var I = 0, len = classNames. length; I <len; I ++ ){
GetClass = getClass. replace ("" + classNames [I] + "","")
}
Ele. className = trim (getClass );
} Else {// none remove all classes
Ele. className = "";
}
}
}
}
Var toggleClass = function (ele, value ){
If (typeof value = "string "){
If (hasClass (ele, value )){
RemoveClass (ele, value );
} Else {
AddClass (ele, value );
}
}
}