问题的改述：为文档提供备用样式表的最佳方法是什么？
我有一个样式表列表，所有样式表都在html文件中引用。我使用javascript来禁用除一个文件之外的所有文件。
例：
style1 disabled = false
style2 disabled = true
实际上，无论disabled属性如何，要加载的最后一个样式表（style2）都是活动样式表。
如何在chrome中的文档样式表之间切换？
我试图设置href属性的值，但它似乎只读。
我一直在使用的代码示例:(我使用的是一个名为MenuStyles的对象，它存储了各种css信息）
function setActiveStyleSheet(name) {
var selectedSheet;
var currentSheet;
for (var i = 0; i < MenuStyles.styleSheets.length; i++) {
currentSheet = MenuStyles.styleSheets[i];
if (currentSheet.name === name) {
selectedSheet = currentSheet.sheetObj;
currentSheet.disabled = false;
} else {
currentSheet.disabled = true;
}
}
return selectedSheet;
}
编辑：事实证明问题完全是由于代码中的错误。残疾人物业工作正常。以下是固定功能：
function setActiveStyleSheet(name) {
var selectedSheet;
var currentSheet;
for (var i = 0; i < MenuStyles.styleSheets.length; i++) {
currentSheet = MenuStyles.styleSheets[i];
if (currentSheet.name === name) {
selectedSheet = currentSheet.sheetObj;
currentSheet.sheetObj.disabled = false;
} else {
currentSheet.sheetObj.disabled = true;
}
}
return selectedSheet;
}
通常，您将子类化BODY标记并使用使用这些类的单个样式表。然后只需交换BODY类，而不是sylesheet。否则，你应该做这个服务器端。
<body class="sheet1">
然后
sheet1.h1 {
...
}
sheet2.h1 {
...
}
如果您知道样式表的顺序，可以使用 -
document.styleSheets[i].disabled=true or
document.styleSheets[i].disabled=false;
如果你有两个样式表，你可以在它们之间切换 -
var S=document.styleSheets;
if(S[0].disabled){
S[0].disabled=false;
S[1].disabled=true;
}
else{
S[1].disabled=false;
S[0].disabled=true;
}
当前的浏览器通过使用“禁用的”DOM属性（Gecko）或添加/删除禁用的属性（Webkit和IE），提供动态启用/禁用样式表的合理能力。不幸的是，这些方法只能可靠地处理引用外部样式表（而不是“样式”标记）的“链接”标记，除非您使用的是IE10 +。是的 - 我说过 - 只有IE在这里做对了。
对于在非IE浏览器上使用“样式”标签的内联CSS，您需要找到一种更粗略的启用/禁用方式，如上所述（删除样式元素等）。
我能够通过设置disabled属性并在样式表中包含'title'属性来实现此功能。 title属性使样式表为PREFERRED而不是PERSISTENT。见http://www.alistapart.com/articles/alternate/
我找到了一个很好的方法（恕我直言）来实现这个目标：
假设您知道样式表的确切顺序。假设您要替换样式表0和1（第一个和第二个）：
要获得样式表状态（启用/禁用），您可以尝试此操作（即测试第二个）：
document.styleSheets[1].disabled
...它返回trueor false。
所以要替换你可以在onclick事件中编写这段代码：
document.styleSheets[0].disabled = !(
document.styleSheets[1].disabled = !(document.styleSheets[1].disabled)
);
HTH！
对我来说，如果链接被禁用，document.styleSheets不会返回集合中的链接（在Chrome中）。仅返回已启用的链接。
我使用document.head.getElementsByTagName（'LINK'）从HEAD中获取所有内容。
喜欢：
private changeStyle(styleName: string): void {
const links = document.head.getElementsByTagName('LINK');
for (let i = 0; i < links.length; i++) {
const link = links[i] as any;
if( !link.href) continue;
if (link.href.indexOf(styleName) === -1) {
link.disabled = true;
} else {
link.disabled = false;
}
}
}