JavaScript dynamic Add style (inline/embedded/outside chain etc rules) _javascript tips

The way to add CSS is inline, inline, outside chain type, import type
A) dynamic introduction of style sheet files:

Copy Code code 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 Code code 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 ("function receives 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.setattibute ("type", "text/css");
Head.appendchild (Tempstyle);
}
}
Firststyle = Styles[0];
Csstext=csscode.join ("\ n");
if (!+ "\v1") {//opacity compatible
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.cssText + = Csstext;
}else if (doc.getboxobjectfor) {
firststyle.innerhtml + = Csstext;
}else{
Firststyle.appendchild (Doc.createtextnode (csstext));
}
}

c) in-line:

Copy Code code as follows:

var addstyle=function (ELE,STR) {
var s = ele.getattribute ("style"), styles;
if (str && typeof str = = "string") {
if (!s) {
Ele.style.cssText = str;
}else{
if (s = = ' [Object] ') {//IE6/7 e.getattribute ("style") returns [Object]
S=ele.style.csstext;
}
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.csstext= styles.join ("") + ";" +STR;
}
}
}

d) Import Type:
Import "Index.css";
To manipulate the methods associated with CSS classes:

Copy Code code 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) {//exists to find the class to be removed
GetClass = "" +ele.classname+ "" ". Replace (Rclass," ");/left or right space, in order to make the class of all kinds of equal, easy to replace the back
for (var i=0,len=classnames.length; i<len; i++) {
GetClass = Getclass.replace ("+classnames[i]+", "")
}
Ele.classname=trim (GetClass);
}else{//does not exist 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);
}
}
}