今天做新模板的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文件的。