So realisieren Sie die Auswahl mehrerer Stile und den Echtzeitwechsel von Stilen. Erleben Sie den Austausch

Wenn wir eine Website erstellen, hoffen wir, dass unsere Website verschiedene Stile nach ihren eigenen Vorlieben hat. Solche Stile können Änderungen im Layout, Unterschiede in der Farbe oder ein speziell angepasster Stil sein für unterschiedliche Benutzergruppen.
Wie können wir eine Auswahl mehrerer Stile und einen Echtzeitwechsel der Stile erreichen?
Tatsächlich unterstützt der IE diese Funktion nicht. Wir können es dem Browser überlassen, diese Funktion zu unterstützen.
Angenommen, wir haben zwei CSS-Sätze, die in zwei verschiedenen Dateien enthalten sind: a.CSS und b.CSS. Fügen Sie dann die folgenden zwei Zeilen XHTML-Code zwischen

ein:

<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" />

Öffnen Sie dann diese Seite mit Ihrem Firefox und wählen Sie: Ansicht- > Sie sollten „Thema A“ und „Thema B“ sehen und in Echtzeit auswählen können.
Eine andere Methode, die wir verwenden können, ist die Verwendung dynamischer Programme wie ASP, PHP, JSP usw. Die Vorteile davon sind Direktheit, Effizienz, gute Kompatibilität und die Fähigkeit, sich Benutzerentscheidungen zu merken. Die Auswahl des Benutzers kann in Cookies aufgezeichnet oder direkt in die Datenbank geschrieben werden. Bei einem erneuten Besuch des Benutzers wird der beim vorherigen Besuch ausgewählte Stil direkt aufgerufen. Wir werden hier nicht näher auf die spezifische Produktion eingehen. Sie können unsere Website www.52css.com besuchen. Wir werden von Zeit zu Zeit Inhalte in diesem Bereich veröffentlichen.
Welche Methode sollten wir jetzt verwenden? Der IE des Mainstream-Browsers unterstützt nicht die Methode, den Browser auswählen zu lassen. Wie implementiert man sie mit einem Programmskript? Wenn meine Webseite statisch ist, gibt es keine Datenbank.
Wir können uns nur für die Verwendung von Javascript entscheiden, um dies zu erledigen. Schauen wir uns den folgenden Code an:

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

Der obige Code ist ein Javascript-Skript, das die Auswahl mehrerer Stile und den Stilwechsel in Echtzeit implementiert. Wir können den obigen Code als js-Datei speichern Zeigen Sie es auf der gewünschten Seite an:

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

Natürlich können Sie den obigen Code auch direkt in die Seite schreiben.
Wir haben drei Stile, einer ist standardmäßig auf die anderen beiden Stile eingestellt. Fügen Sie diese drei CSS-Dateien in die Seitendatei ein:

<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" />

Nun können wir jetzt Links hinzufügen, um den Stil auf der Seite zu wechseln:

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

Jetzt haben wir Wenn Sie fertig sind, testen wir unsere Ergebnisse oben und sehen uns den Effekt an.

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>