Explication détaillée de la façon d'utiliser la fonction javascript pour ajouter un exemple de code de style CSS

Donnez d'abord la fonction.

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

Parfois, nous devons introduire dynamiquement certains styles CSS dans le document dans le fichier .js. Pour certains codes CSS courts, c'est facile à gérer. Nous pouvons appeler sa méthode de style, telle que

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

Peu importe si elle est plus longue :

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

<. 🎜>Ces fonctions sont un peu lourdes dans IE. J'ai toujours utilisé les fonctions natives du navigateur pris en charge, et utiliser directement le code binaire est le plus efficace.

varoStylesheet=document.createStyleSheet(sURL,iIndex);

Les deux paramètres de createStyleSheet sont facultatifs.

Mais si notre style est unique à une certaine page et ne peut être utilisé que par les administrateurs, et que cette partie de la page est générée dynamiquement, devons-nous l'introduire dès le début ? Dois-je créer un fichier spécial pour le charger ? La meilleure façon est de regrouper ces styles avec des scripts dynamiques. Cette fonction a été développée à cet effet.
Franchement, il a été développé à l'origine pour les éditeurs de texte enrichi. Comme nous le savons tous, la manière la plus courante d'utiliser une zone de saisie de texte enrichi consiste à placer le contenu à saisir dans une iframe. Cela implique deux types de documents, l'un est le document de la page principale et l'autre est le document. de l'iframe. Le document iframe implique également des problèmes de compatibilité. Nous pouvons :
variframe=document.createElement('iframe');//Générer un éditeur de texte riche pour l'édition
variframeDocument=iframe.contentDocument||iframe.contentWindow.document
......
En bref, le jugement initial de la fonction est préparé pour ces deux documents. S'il n'y a pas d'iframe impliqué, nous n'avons besoin de transmettre qu'un seul paramètre. Le dernier paramètre est toujours une chaîne CSS.
Ensuite, il y a le problème de générer dynamiquement l'élément styleSheet et d'ajouter la chaîne CSS à cet élément. Bien sûr, s'il y en a un au stade actuel, utilisez bien sûr celui tout fait. Plus il y a d’éléments DOM, plus la charge pour le navigateur est grande. On pense à la méthode document.styleSheets. Il renvoie une collection, comprenant des éléments de style et des éléments de lien, et implique également un problème de compatibilité, tel que :

<!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>

Utilisez alert(document.styleSheets.length) pour le tester ci-dessus, IE ; renvoie 6, le navigateur W3C renvoie 5. Elle a donc été rejetée. Et nous utilisons uniquement l’élément de style, pas les liens externes. La deuxième partie du jugement concerne l'élément de style dans la tête. S'il n'existe pas, créez-en un. Ensuite, nous ajoutons simplement la chaîne CSS au premier élément de style.

Ensuite, nous devons ajouter un verrou de sécurité, car lorsque media="print", l'effet défini n'est efficace que lorsque la page est imprimée. Afin d'éviter que la valeur média du premier élément de style ne soit différente de celle de screen, nous devons la modifier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!