Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman

Apabila kami membuat laman web, kami berharap laman web kami akan menjadi pelbagai gaya Pengguna boleh memilih gaya yang berbeza mengikut keutamaan mereka sendiri untuk kumpulan pengguna yang berbeza.
Bagaimanakah kita boleh mencapai pemilihan berbilang gaya dan penukaran gaya masa nyata?
Sebenarnya, IE tidak menyokong fungsi ini. Kita boleh menyerahkannya kepada pelayar yang menyokong fungsi ini.
Katakan kita mempunyai dua set CSS, disertakan dalam dua fail berbeza: a.CSS dan b.CSS. Kemudian tambahkan dua baris kod XHTML berikut antara 93f0f5c25f18dab9d176bd4f6de5d30e dan 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" />

Kemudian buka halaman ini dengan Firefox anda dan pilih: Lihat- > anda sepatutnya dapat melihat "Tema A" dan "Tema B" dan memilihnya dalam masa nyata.
Kaedah lain yang boleh kami gunakan ialah menggunakan atur cara dinamik, seperti ASP, PHP, JSP, dsb. Kelebihan ini adalah langsung, cekap, keserasian yang baik dan keupayaan untuk mengingati pilihan pengguna. Pemilihan pengguna boleh direkodkan dalam Kuki atau ditulis terus ke pangkalan data Apabila pengguna melawat semula, gaya yang dipilih pada lawatan sebelumnya akan dipanggil terus. Kami tidak akan memberikan butiran tentang pengeluaran khusus di sini Anda boleh memberi perhatian kepada tapak web kami www.52css.com Kami akan melancarkan kandungan di kawasan ini dari semasa ke semasa.
Apakah kaedah yang patut kita gunakan sekarang? Pelayar arus perdana IE tidak menyokong kaedah membenarkan penyemak imbas memilih Bagaimana untuk melaksanakannya dengan skrip program? Apabila laman web saya statik, tiada pangkalan data.
Kami hanya boleh memilih untuk menggunakan javascript untuk menyelesaikannya. Mari lihat kod berikut:

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

Kod di atas ialah skrip javascript yang melaksanakan pemilihan berbilang gaya dan penukaran gaya masa nyata Kita boleh menyimpan kod di atas sebagai fail js dan paparkannya pada halaman yang diperlukan Petikan langsung:

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

Sudah tentu, anda juga boleh menulis kod di atas terus di dalam halaman.
Kami mempunyai tiga gaya, satu lalai kepada dua gaya yang lain. Perkenalkan tiga fail css ini ke dalam fail halaman:

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

Nah, kini kami boleh menambah pautan untuk menukar gaya dalam halaman:

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

Kini kami sudah selesai, mari kita uji keputusan kami di atas dan lihat kesannya.

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>