document.enableStyleSheetsForSet() 的兼容

可能有不少同学已经了解alternatestylesheet，不过实际上author样式表可以被设定为三类：

1.persistentstylesheet：总是应用的样式表

2.preferredstylesheet：默认应用的样式表

3.alternatestylesheet：其他可选的样式表

我们平时通常写的样式表都是第一类，即persistentstylesheet。

第二类样式表就是有title属性的样式表，比如：

<linkrel="stylesheet"title="人文主义"href="...">

第三类则是这样：

<linkrel="alternatestylesheet"title="古典"href="...">

<linkrel="alternatestylesheet"title="Geek风"href="...">

一些浏览器（FF和Opera）可以通过菜单切换到alternatestylesheet。Safari可能也有，Chrome默认没有，但是可安装extension。

注意，切换是依据title属性互斥的，相同title的样式表称为一个样式表集（stylesheetset）。比如切换到“古典”之后，原先perferred的“人文主义”就被disable了。但是persistentstylesheet仍然是起作用的。

问题是如何通过脚本来切换样式表集？CSSOM规范引入了一个新的API来达成这个目的：

[Supplemental]interfaceDocument{

readonlyattributeStyleSheetListstyleSheets;

...

voidenableStyleSheetsForSet(DOMString?name);

};

所以简单的：

document.enableStyleSheetsForSet('Geek风')

就可以切换到“Geek风”样式表集。

FF4已经支持该方法，不过较早的版本以及使用WebKit引擎的Safari、Chrome等怎么办呢？

一种想法是遍历document.styleSheets然后根据title来设定disabled值，因为标准所规定的行为就是如此。代码如下：

// 以下代码在当前WebKit下不能work！
document.enableStyleSheetsForSet = function(name) {
    if (name != null) for (var i = 0, n = this.styleSheets.length; i < n; i++) {
        var sheet = this.styleSheets[i]
        if (sheet.title) sheet.disabled = !(sheet.title == name)
    }
}

不幸的是，上述看似合理的代码在WebKit下不能work，因为WebKit的document.styleSheets集合里根本不包括所有alternatestylesheet。

那么我们是否能自行取样式集合呢？比如通过document.querySelectorAll("style,link[rel~='stylesheet']")。实际也是不行的，因为WebKit根本就忽略了那些alternate样式表，即使你直接设置那些样式表的disabled=false，也不能启用样式表（实际上它们的disabled值原本就是false）。

难道除了抱怨WebKit在这个方面不合标准之外，我们就没辙了吗？

在放弃之前，我们应该把spec翻出来再好好读读。

直接上代码：

if (!document.enableStyleSheetsForSet) document.enableStyleSheetsForSet = function(name) {
		if (name != null) {
			var meta = document.querySelector('meta[http-equiv="default-style"]')
			if (!meta) {
				meta = document.createElement('meta')
				meta.httpEquiv = 'default-style'
				document.head.appendChild(meta)
			}
			meta.content = name
		}
	}

非常简单的实现，一切皆源自于default-style这个被人遗忘的特性。以上代码在Chrome10下测试通过。

PS.在上述代码里，你可能注意到了“document.head”，这也是HTML5新增的属性，但是那些更早的浏览器并没有这个属性。类似的问题还有querySelector方法。这些就作为浏览器兼容性的练习题留给读者了。