今天做新模板的DEMO頁面，遇到兩個問題：
1.實時切換CSS樣式
2.給切換樣式的<Select>標籤所在div加了個背景圖片，需要使用透明PNG圖片
這兩個問題以前就遇到過，但這東東也不經常用，就知道這兩個問題可以解決，並沒有記如何解決，搜了一下，然後改了改代碼就成了。
下面一個個問題解決：
<!--
google_ad_client = "pub-3826069305951044";google_ad_width = 600;google_ad_height = 15;google_ad_format = "468x15_0ads_al_s";
//2007-01-03: b3inside.com
google_ad_channel = "5719833041";google_color_border = "FFFFFF";google_color_bg = "FFFFFF";google_color_link = "C20000";google_color_text = "666666";google_color_url = "37759E";
//-->
<iframe width="600" scrolling="no" height="15" frameborder="0" name="google_ads_frame" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-3826069305951044&dt=1196401145937&lmt=1194501187&format=468x15_0ads_al_s&output=html&correlator=1196401145937&channel=5719833041&url=http%3A%2F%2Fwww.b3inside.com%2Fwebstandards%2F000396.html&color_bg=FFFFFF&color_text=666666&color_link=C20000&color_url=37759E&color_border=FFFFFF&ref=http%3A%2F%2Fwww.google.cn%2Fsearch%3Fcomplete%3D1%26hl%3Dzh-CN%26newwindow%3D1%26q%3Dpng%2B%25E9%2580%258F%25E6%2598%258E%2Bie%2Bcss%26btnG%3DGoogle%2B%25E6%2590%259C%25E7%25B4%25A2%26meta%3D&cc=100&ga_vid=607275345.1196401146&ga_sid=1196401146&ga_hid=1408945515&flash=9&u_h=768&u_w=1280&u_ah=738&u_aw=1280&u_cd=32&u_tz=480&u_his=1&u_java=true&u_nplug=11&u_nmime=55" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true"></iframe>
1.實時切換CSS樣式
首先，因爲我並不需要記錄用戶所更換的樣式，所以不必使用Cookie，就用這個方法來實現切換行爲：
styleswitcher.js
function setActiveStyleSheet(title) {
var i, a, main;
if (title) {
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('value');
}
return null;
}
var i, a, main;
if (title) {
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('value');
}
return null;
}
由於用到下拉框，所以把要使用的樣式名稱都放這裏：
index.html
<select οnchange="setActiveStyleSheet(value)">
<option value="ac">ac</option>
<option value="ac2">ac2</option>
<option value="ac3">ac3</option>
</select>
<option value="ac">ac</option>
<option value="ac2">ac2</option>
<option value="ac3">ac3</option>
</select>
樣式表文件放到那裏你知道的，注意兩點：
1.rel="stylesheet"表示默認顯示，而其餘的都rel="alternate stylesheet"
2.加title，如title="demo1" />
在這裏可以參與討論
2.給切換樣式的<Select>標籤所在div加了個背景圖片，需要使用透明PNG圖片
/* For IE 6.0 */
* html #switchStyle{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/bgcanvas.png");
background:none;
}
* html #switchStyle{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/bgcanvas.png");
background:none;
}
值得一提的是todd的說明：
使用這個濾鏡調用的圖片文件地址必須是相對於頁面文件的，而不是像普通的背景一樣，是相對於css文件的。
