这是发表于http://www.alistapart.com上的一篇关于切换样式表的文章，由于本人水平有限，翻译质量可能并不太好，但主要意思我想还是已经说清楚了。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
[center]可选样式：切换样式表（Paul Sowden)[/center]
你完成了一个网页，并使用了ＸＨＴＭＬ来控制网页结构，样式表来体现文档的外观，你就应该是一个不错的网页制作者了。但你还可以再进一步的写出几个替换样式表以体现你是多么的厉害。
这样做了很不错，但你还需要一个跨浏览器的动态转换样式表的方法。
为你的站点指定样式
通过在ＨＥＡＤ中使用一系列的ＬＩＮＫ元素，可以引用多个样式表。在一个文档中，可以存在三种有关系的外部样式表：公用的，首选的，备用的。
公用样式表
这类样式表通常是激活了的，并被看作是起主要作用的的样式表。它具有其他任何样式表所共有的样式定义。要使某一个样式表成为公用的样式表，它的rel属性应该写做“stylesheet"，而且不使用title标签。现在把"paul.css"作为公用的样式表，在link里面就该这样书写：
引用:
<link rel="stylesheet" type="text/css" herf="paul.css />
首选样式表
这累样式表在网页载入时被设置为默认的，如果浏览者选择了替换样式表它们可以被关闭。
要让样式表成为首选的，rel属性应该被设置为"stylesheet"而且还要使用title定义一个名称。
多个首选样式表可以通过指定同样的title属性组合在一起。这些组合在一起的样式表将会同时被使用并同时被关闭。如果多组样式表被声明为首选，那第一组将被当作是首选的样式表组。
现在把paul.css设置为首选的，并加上一个title值，并定义个默认的名字。
引用:
<link rel="stylesheet" herf="paul.css" type="text/css" title="bog standard" />
备用样式表
浏览者可以选者这类样式来代替默认的样式表。并且还允许浏览者自定义站点的样式并选择他们自己的方案。同时，还能被用于网站的可访问性样式。
要指定一个备用样式表，rel值应该是"alternate stylesheet"并且也要指定一个title值。就象首选样式表一样，备用的样式表也能组合在一起通过使用共同的的title值。
再次使用上一个例子，把paul.css定义为备用样式表，并且把关键字"alternate"加入到rel属性里去。
引用:
<link rel="alternate stylesheet" type="text/css" herf="paul.css" title="wacky" />
注：这种关系只能用在通过连接进来的外部样式表中。
样式表转化
当文档被载入时，固定的和首选的样式表被应用于文档中。而备用样式表可以被用户所选择。W3C认为浏览器应该给用户一个选择使用自己喜欢的样式的机会，并建议通过下拉菜单或者工具条来实现这个选择。
到现在为止还不错，因为我们有了几个样式表，而且浏览者也能从目录里面选择自己的样式。但我们遇到了一个问题。首先，MOZILLA在查看菜单下提供了一个样式表选择器，但MSIE却不提供这样一个样式选择工具。因此，我们虽然有几个样式表，但在MSIE里全无法使用。
运用少量符合DOM规则的JavaScript，我们可以给MSIE和MOZILLA用户提供一个选择自己的样式表的机会。而且他们的选择还可以被储存在cookie里面。因为我们象W3C所说的那样使用了likn标签，所以这些脚本不会干扰MOZILLA目录里面的选择，相反可以和平共处。
脚本
首先，我们需要能区分这三中类型样式表的脚本。这相对来说非常简单，我们只需要检测到每个link元素中的俩个不同的值就行了。
连接上样式表了吗？
引用:
HTMLLinkElement.getAttribute("rel").indexOf("style") != -1
定义了title属性吗？
引用:
HTMLListElement.getAttribute("title")
rel值里面包括了关键字"alternate"吗？
引用:
HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1
注：我们检测的是"alt"字符串，因为在一些浏览器里，使用关键字"alternative"代替"aleternate"。
通过这三个检测方法，我们可以编写一个函数来切换样式表。这个函数可以让我们通过link元素来循环禁用所有的我们不想使用的首选的和替换样式表，并激活所有我们想使用的首选和备用样式表。
注：只有首选与备用样式表才使用title属性。
这个函数如下：
引用:
function setActiveStyleSheet(title) {
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("title");}
return null;
}
因为这是关于样式表的文章，而ＣＯＯＫＩＥＳ是完全不同的话题，我在这里就不解释关于cookie的函数了，但是为了你的方便，我会在这里写出这个函数(这个函数由ALA的作者Peter-Paul Kock所编写)。
引用:
function createCookie(name,value,days){
if(days){
var date=new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires= "; expires="+date.toGMTString();
}
eles expires="";
document.cookie = name+"="+value+expires+"; path=/";}
function readCookie(name){
var nemeEQ = name+ "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c=ca[i];
while (c.charAt(0)=='') c= c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
要使用这个COOKIE函数，我们需要在WINDOW中添加onload和onunload行为监听器。
onLoad
W3C制定的DOM2属性"disabled"（当样式表被应用于一个文档时返回为FLASE）在MOZILLA里可以被正确执行，但在MSIE里却不能够被执行。
MSIE的私有属性里也有"disabeled"，可以用与LINK元素，但被默认设置为对所有的LINK元素都返回为FALSE。
为了让MSIE的这个属性与DOM2的属性相匹配，我们给setActiveStyleSheet()函数定义一个首选样式表的名称。
为了检测哪一个样式表是首选的样式表，我们还需要一个函数。因为这个与setActiveStyleSheet()函数差不多，我就不在解释它是如何编写的了，下面就是这个函数：
引用:
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
在载入函数中，我们首先设置一个title变量。它在cookie中保留上一个样式表的值，或者没有保留这个值。为了方便，我们把这个cookie叫做"style"。
然后，我们用setActiveStyleSheet()函数传递title变量。我们载入函数这样编写：
引用:
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
注：要把这个函数放在整个文档前，才能正确的使用我们自己定义的样式表。如果你需要这样做，一定要使用这几个函数，并且要记得定义link元素。
onunload
要在关闭浏览器以前保存ＣＯＯＫＩＥ非常简单。我们要做的就是使getActiveStyleSheet()函数返回当前激活的样式表。并记录于一个ＣＯＯＫＩＥ中。我们使用下面这个函数来保存ＣＯＯＫＩＥ。
引用:
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
把所有东西组合在一起
为了让你的站点更加迷人，你要把这些函数全部包括在你的文档中去。为了方便我把他们写在了一个ＪＳ文件里，你可以下载并加到你的站点里去。http://www.alistapart.com/d/alternate/styleswitcher.js
把这个文件放到你的ＨＥＡＤ之间，要记得一定得放在所有连接样式表的link元素的后面。html因该这样写：
引用:
<script type="text/javascript"
src="/scripts/styleswitcher.js"></script>
为了让浏览者切换样式表，你可以使用一个onClick函数。比如。要在默认与paul俩个样式表中切换，你的html文档应该这样写：
引用:
<a href="#"
onclick="setActiveStyleSheet('default');
return false;">change style to default</a>
<a href="#"
onclick="setActiveStyleSheet('paul');
return false;">change style to paul</a>
一旦浏览者选择了一个样式表，它将会保存在cookie中。要在整个站点使用相同的样式，同样的样式表和脚本连接都要包含每页的head之间。
完成了，朋友们！
现在你有了一个可定制样式的站点，就象Ｗ３Ｃ宣称的那样。。祝你愉快！
Paul Sowden是一个来自英国伦敦的小伙子，他认为如果每个设计者都使用与标准兼容的技术，网络将会成为一个更好的地方。
这是我尝试翻译的第一篇文章，质量并不太好，希望大家谅解！如果有不对的地方请大家指出来。
