Javascript dynamic style adding (intra-row/Embedded/external chain rules) _ javascript skills

The methods for adding CSS include inline style, embedded style, external chain, and pilot type. The following describes how to dynamically Add the above style rules in javascript, if you are interested, you can refer to the following methods for adding CSS: inline, embedded, external chain, and pilot type.
A) dynamically introduce the style sheet file:

The 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:

The 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:

The Code is as follows:

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 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? 6.1.3 ";
Methods related to CSS operations:

The 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 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 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 );
}
}
}