动态模板效果的实现

liudaoru

今天偶然去了google一个哥们的网站http://david.tryse.net/googleearth/，内容倒没有太注意，有一个动态选择样式的效果倒很吸引我的注意力。
 
主要代码如下：
function setActiveStyleSheet(title,allframes) {var f, i, a;for(i=0; (a = document.getElementsByTagName("link")); 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是为了记录用户的选择。
 
这种方式在文章里看到过，这是第一次看到实用，感觉还不错。就是样式不能太多，否则加载的成本太大。