今天做新模板的DEMO页面，遇到两个问题：
1.实时切换CSS样式
2.给切换样式的<Select>标签所在div加了个背景图片，需要使用透明PNG图片
这两个问题以前就遇到过，但这东东也不经常用，就知道这两个问题可以解决，并没有记如何解决，搜了一下，然后改了改代码就成了。
下面一个个问题解决：
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 onchange="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文件的。
到这里，上面两个小细节就处理完了。
至于样式是否吸引人就看你喽:p
Comments (1)
以前用blogger的时候好像找过方法实现css切换
当时用了一段时间就换MT了，模版没保存。
这次收藏一下~~呵呵
Posted by dimlau | November 16, 2006 7:54 PM | #1042
Posted on November 16, 2006 19:54