Ausführliche Erklärung, wie Sie mithilfe der Javascript-Funktion ein Codebeispiel im CSS-Stil hinzufügen

Geben Sie zuerst die Funktion an.

varaddSheet=function(){ 
vardoc,cssCode; 
if(arguments.length==1){ 
doc=document; 
cssCode=arguments[0] 
}elseif(arguments.length==2){ 
doc=arguments[0]; 
cssCode=arguments[1]; 
}else{ 
alert("addSheet函数最多接受两个参数!"); 
} 
if(!+"v1"){//增加自动转换透明度功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜 
vart=cssCode.match(/opacity:(d?.d+);/); 
if(t!=null){ 
cssCode=cssCode.replace(t[0],"filter:alpha(opacity="+parseFloat(t[1])*100+")") 
} 
} 
cssCode=cssCode+" ";//增加末尾的换行符，方便在firebug下的查看。 
varheadElement=doc.getElementsByTagName("head")[0]; 
varstyleElements=headElement.getElementsByTagName("style"); 
if(styleElements.length==0){//如果不存在style元素则创建 
if(doc.createStyleSheet){//ie 
doc.createStyleSheet(); 
}else{ 
vartempStyleElement=doc.createElement('style');//w3c 
tempStyleElement.setAttribute("type","text/css"); 
headElement.appendChild(tempStyleElement); 
} 
} 
varstyleElement=styleElements[0]; 
varmedia=styleElement.getAttribute("media"); 
if(media!=null&&!/screen/.test(media.toLowerCase())){ 
styleElement.setAttribute("media","screen"); 
} 
if(styleElement.styleSheet){//ie 
styleElement.styleSheet.cssText+=cssCode; 
}elseif(doc.getBoxObjectFor){ 
styleElement.innerHTML+=cssCode;//火狐支持直接innerHTML添加样式表字串 
}else{ 
styleElement.appendChild(doc.createTextNode(cssCode)) 
} 
}

Manchmal müssen wir dem Dokument in der .js-Datei dynamisch einige CSS-Stile hinzufügen. Bei einigen kurzen CSS-Codes ist dies einfach zu handhaben, z. B.

varddd=document.getElementById("ddd"); 
ddd.style.border="1pxsolidred";

Es spielt keine Rolle, ob es länger ist:

varddd=document.getElementById("ddd"); 
ddd.style.cssText="border:1pxsolidred;color:#000;background:#444;float:left";

functionaddSheetFile(path){ 
varfileref=document.createElement("link") 
fileref.rel="stylesheet"; 
fileref.type="text/css"; 
fileref.href=path; 
fileref.media="screen"; 
varheadobj=document.getElementsByTagName('head')[0]; 
headobj.appendChild(fileref); 
}

Diese Funktionen sind im IE etwas umständlich. Ich habe immer die nativen Funktionen des unterstützten Browsers verwendet, und die direkte Verwendung von Binärcode ist am effizientesten.

varoStylesheet=document.createStyleSheet(sURL,iIndex);

Die beiden Parameter von createStyleSheet sind optional.
Aber wenn unser Stil für eine bestimmte Seite einzigartig ist und nur von Administratoren verwendet werden kann und dieser Teil der Seite dynamisch generiert wird, müssen wir ihn dann von Anfang an einführen? Muss ich zum Laden eine spezielle Datei erstellen? Der beste Weg besteht darin, diese Stile mit dynamischen Skripten zu bündeln. Zu diesem Zweck wurde diese Funktion entwickelt.
Ehrlich gesagt wurde es ursprünglich für Rich-Text-Editoren entwickelt. Wie wir alle wissen, besteht die beliebteste Methode zur Verwendung eines Rich-Text-Eingabefelds darin, den einzugebenden Inhalt in einen Iframe einzufügen. Dabei handelt es sich um zwei Arten von Dokumenten: das Dokument der Hauptseite und das Dokument des Iframes. Das Dokument von iframe weist auch Kompatibilitätsprobleme auf. Wir können:
variframe=document.createElement('iframe');//Richtexteditor zum Bearbeiten generieren
variframeDocument=iframe.contentDocument||iframe.contentWindow.document;
......
Kurz gesagt, die erste Beurteilung der Funktion wird für diese beiden Dokumente vorbereitet. Wenn kein Iframe beteiligt ist, müssen wir nur einen Parameter übergeben. Der letzte Parameter ist immer ein CSS-String.
Dann gibt es noch das Problem, das styleSheet-Element dynamisch zu generieren und den CSS-String zu diesem Element hinzuzufügen. Wenn es zum jetzigen Zeitpunkt eines gibt, verwenden Sie natürlich das fertige. Je mehr DOM-Elemente vorhanden sind, desto größer ist die Belastung für den Browser. Wir denken an die Methode document.styleSheets. Es gibt eine Sammlung zurück, einschließlich Stilelementen und Linkelementen, und beinhaltet auch ein Kompatibilitätsproblem, wie zum Beispiel:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlns="　　 
<head> 
<metahttp-equiv="content-type"content="text/html;charset=UTF-8"/> 
<%#强制IE8像IE7一样呈现网页-%> 
<metahttp-equiv=”X-UA-Compatible”content=”IE=EmulateIE7″/> 
<%#--默认所有的链接都在本窗口打开-%> 
<basetarget="_self"/> 
<title><%=h(yield(:title))||controller.action_name%></title> 
<%=stylesheet_link_tag"screen","button","style"%> 
<linkrel="stylesheet"href="/stylesheets/print.css"type="text/css"media="print"> 
<!--[ifltIE8]> 
<linkrel="stylesheet"href="/stylesheets/ie.css"type="text/css"media="screen"> 
<![endif]--> 
<%=javascript_tag"window._token=&#39;#{form_authenticity_token}&#39;"ifActionController::Base.allow_forgery_protection%> 
<%=javascript_include_tag:defaults%> 
<styletype="text/css"media="print"></style> 
</head>

Verwenden Sie „alert(document.styleSheets.length);“, um es oben zu testen gibt 6 zurück, der W3C-Browser gibt 5 zurück. Daher wurde es abgelehnt. Und wir verwenden nur das Style-Element, keine externen Links. Der zweite Teil der Beurteilung betrifft das Stilelement im Kopf. Wenn es nicht vorhanden ist, erstellen Sie eines. Dann fügen wir einfach den CSS-String zum ersten Stilelement hinzu.
Als nächstes müssen wir eine Sicherheitssperre hinzufügen, denn bei media="print" ist der definierte Effekt nur wirksam, wenn die Seite gedruckt wird. Um zu verhindern, dass sich der Medienwert des ersten Stilelements vom Bildschirm unterscheidet, müssen wir ihn ändern.

varstyleElement=styleElements[0]; 
varmedia=styleElement.getAttribute("media"); 
if(media!=null&&!/screen/.test(media.toLowerCase())){ 
styleElement.setAttribute("media","screen"); 
}

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie Sie mithilfe der Javascript-Funktion ein Codebeispiel im CSS-Stil hinzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!