动态模板效果的实现

今天偶然去了google一个哥们的网站http://david.tryse.net/googleearth/，内容倒没有太注意，有一个动态选择样式的效果倒很吸引我的注意力。

 

主要代码如下：

function setActiveStyleSheet(title,allframes) {
	var f, i, a;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if(a.getAttribute("rel").indexOf("stylesheet") != -1 && a.getAttribute("title")) {
			a.disabled = true; // not doing if/else since IE wont understand turning on a stylesheet without turning it off first..
			if(a.getAttribute("title") == title) a.disabled = false;
		}
	}
	createCookie('style', title, 7);
}

 

主要的逻辑比较简单，首先在页面的head中将所有的样式都写入：

<link rel="alternate stylesheet" href="../dtstylebw.css" title="black n white" type="text/css">
<link rel="stylesheet" href="../dark.css" title="dark" type="text/css">
<link rel="alternate stylesheet" href="../noshadow.css" title="no shadows" type="text/css">
<link rel="alternate stylesheet" href="../dtstyle.css" title="original" type="text/css">

 

然后遍历样式数组，判断是否需要处理（通过title来区别）。接着将样式设置为不可用a.disabled = true，如果是指定的

title则设置为可用。

 

最后的createCookie是为了记录用户的选择。

 

这种方式在文章里看到过，这是第一次看到实用，感觉还不错。就是样式不能太多，否则加载的成本太大。