切换CSS和IE下的透明PNG

今天做新模板的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&amp;dt=1196401145937&amp;lmt=1194501187&amp;format=468x15_0ads_al_s&amp;output=html&amp;correlator=1196401145937&amp;channel=5719833041&amp;url=http%3A%2F%2Fwww.b3inside.com%2Fwebstandards%2F000396.html&amp;color_bg=FFFFFF&amp;color_text=666666&amp;color_link=C20000&amp;color_url=37759E&amp;color_border=FFFFFF&amp;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&amp;cc=100&amp;ga_vid=607275345.1196401146&amp;ga_sid=1196401146&amp;ga_hid=1408945515&amp;flash=9&amp;u_h=768&amp;u_w=1280&amp;u_ah=738&amp;u_aw=1280&amp;u_cd=32&amp;u_tz=480&amp;u_his=1&amp;u_java=true&amp;u_nplug=11&amp;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;
}

由于用到下拉框，所以把要使用的样式名称都放这里：
index.html

<select onchange="setActiveStyleSheet(value)">
<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;
}

值得一提的是todd的说明：

使用这个滤镜调用的图片文件地址必须是相对于页面文件的，而不是像普通的背景一样，是相对于css文件的。