Comment réaliser une sélection multi-styles et un changement de styles en temps réel_Échange d'expérience

Lorsque nous créons un site Web, nous espérons que notre site Web sera multi-style. Les utilisateurs pourront choisir différents styles en fonction de leurs propres préférences. Ces styles peuvent être des changements de mise en page, des différences de couleur ou un style spécialement personnalisé. pour différents groupes d'utilisateurs.
Comment pouvons-nous réaliser une sélection multi-styles et un changement de style en temps réel ?
En fait, IE ne prend pas en charge cette fonction. Nous pouvons laisser le soin au navigateur de prendre en charge cette fonction.
Supposons que nous ayons deux ensembles de CSS, enfermés dans deux fichiers différents : a.CSS et b.CSS. Ajoutez ensuite les deux lignes de code XHTML suivantes entre 93f0f5c25f18dab9d176bd4f6de5d30e et 9c3bca370b5104690d9ef395f2c5f8d1 :

<link rel="stylesheet" type="text/css" title="主题A" href="a.css?7.1.34" /> 
<link rel="alternate stylesheet" type="text/css" title="主题B" href="b.css?7.1.34" />

Ouvrez ensuite cette page avec votre Firefox et sélectionnez : View- > vous devriez pouvoir voir « Thème A » et « Thème B » et les sélectionner en temps réel.
Une autre méthode que nous pouvons utiliser consiste à utiliser des programmes dynamiques, tels que ASP, PHP, JSP, etc. Les avantages sont directs, efficaces, une bonne compatibilité et la capacité de mémoriser les choix de l'utilisateur. La sélection de l'utilisateur peut être enregistrée dans des cookies ou directement écrite dans la base de données. Lors de la prochaine visite de l'utilisateur, le style sélectionné lors de la visite précédente sera directement rappelé. Nous n'entrerons pas dans les détails de la production spécifique ici. Vous pouvez prêter attention à notre site Web www.52css.com Nous lancerons du contenu dans ce domaine de temps en temps.
Quelle méthode devrions-nous utiliser maintenant ? Le navigateur grand public IE ne prend pas en charge la méthode permettant au navigateur de choisir. Comment l'implémenter avec un script de programme ? Lorsque ma page Web est statique, il n'y a pas de base de données.
Nous ne pouvons choisir d'utiliser que javascript pour le faire. Regardons le code suivant :

function setActiveStyleSheet(title) { 
var i, a, main; 
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { 
a.disabled = true; 
if(a.getAttribute("title") == title) a.disabled = false; 
} 
} 
} 
function getActiveStyleSheet() { 
var i, a; 
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); 
} 
return null; 
} 
function getPreferredStyleSheet() { 
var i, a; 
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
if(a.getAttribute("rel").indexOf("style") != -1 
&& a.getAttribute("rel").indexOf("alt") == -1 
&& a.getAttribute("title") 
) return a.getAttribute("title"); 
} 
return null; 
} 
function createCookie(name,value,days) { 
if (days) { 
var date = new Date(); 
date.setTime(date.getTime()+(days*24*60*60*1000)); 
var expires = "; expires="+date.toGMTString(); 
} 
else expires = ""; 
documents.cookie = name+"="+value+expires+"; path=/"; 
} 
function readCookie(name) { 
var nameEQ = name + "="; 
var ca = documents.cookie.split(';'); 
for(var i=0;i < ca.length;i++) { 
var c = ca[i]; 
while (c.charAt(0)==&#39; &#39;) c = c.substring(1,c.length); 
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
} 
return null; 
} 
window.onload = function(e) { 
var cookie = readCookie("style"); 
var title = cookie ? cookie : getPreferredStyleSheet(); 
setActiveStyleSheet(title); 
} 
window.onunload = function(e) { 
var title = getActiveStyleSheet(); 
createCookie("style", title, 365); 
} 
var cookie = readCookie("style"); 
var title = cookie ? cookie : getPreferredStyleSheet(); 
setActiveStyleSheet(title);

Le code ci-dessus est un script javascript qui implémente la sélection multi-style et le changement de style en temps réel. Nous pouvons enregistrer le code ci-dessus sous forme de fichier js et. affichez-le sur la page souhaitée. Citation directe :

<script type="text/javascript" src="cssturn.js?7.1.34"></script>

Bien entendu, vous pouvez également écrire le code ci-dessus directement à l'intérieur de la page.
Nous avons trois styles, l'un par défaut pour les deux autres styles. Introduisez ces trois fichiers CSS dans le fichier de la page :

<link rel="stylesheet" type="text/CSS" href="css.css?7.1.34" /> 
<link rel="stylesheet" type="text/CSS" href="aaa.css?7.1.34" title="aaa" /> 
<link rel="stylesheet" type="text/CSS" href="bbb.css?7.1.34" title="bbb" />

Eh bien, nous pouvons maintenant ajouter des liens pour changer de style dans la page :

<a href="#" onclick="setActiveStyleSheet(&#39;&#39;,1); return false;">默认样式－白色</a> 
<a href="#" onclick="setActiveStyleSheet(&#39;aaa&#39;,1); return false;">样式一－蓝色</a> 
<a href="#" onclick="setActiveStyleSheet(&#39;bbb&#39;,1); return false;">样式二－橙色</a>

Maintenant, nous sont terminés, testons nos résultats ci-dessus et voyons l'effet.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
http://www.w3.org/1999/xhtml"> 
 
 
 
http://www.52css.com/attachments/month_0701/r2007128164252.css"  /> 
http://www.52css.com/attachments/month_0701/c2007128164223.css" title="aaa" /> 
http://www.52css.com/attachments/month_0701/h2007128164239.css" title="bbb" /> 
 
 
 
<a href="#" onclick="setActiveStyleSheet(&#39;&#39;,1); return false;">默认样式－白色</a> 
<a href="#" onclick="setActiveStyleSheet(&#39;aaa&#39;,1); return false;">样式一－蓝色</a> 
<a href="#" onclick="setActiveStyleSheet(&#39;bbb&#39;,1); return false;">样式二－橙色</a>