在Chrome使用javascript启用禁用样式表(enable disable styleshe

另一种方式的问题：什么是可以为文档提供替代样式的最好方法？

我有样式表，所有这些都在HTML文件中引用的列表。我使用JavaScript来禁用所有，但一个文件。

例：

style1   disabled = false
style2   disabled = true

在实践中，最后的样式表来加载（蓝紫魅力）是活动之一，而不管禁用属性。

我怎样才能样式表之间交替在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;
}

编辑：原来的问题是由于完全在代码中的bug。 disabled属性工作正常。下面是固定功能：

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;
}

Answer 1:

一般来说，你会继承脱去了身上的标签和使用，使用这些类的单一样式表。然后，只需交换BODY类，而不是sylesheet。否则，你应该做这个服务器端。

<body class="sheet1">

然后

sheet1.h1 {
 ...
}
sheet2.h1 {
 ...
}

Answer 2:

如果你知道你的样式表的顺序，你可以使用 -

document.styleSheets[i].disabled=true or
document.styleSheets[i].disabled=false;

如果你有2个样式表，你可以在它们之间进行切换与 -

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;
}

Answer 3:

Current browsers offer reasonable ability to dynamically enable/disable stylesheets through the use of either the 'disabled' DOM property (Gecko) or by adding/removing the disabled attribute (Webkit and IE). Unfortunately, these approaches only reliably work on 'link' tags that reference an external stylesheet (not 'style' tags), unless you are using IE10+. Yes - I said that - only IE does the right thing here.

For inline CSS using 'style' tags on non-IE browsers, you need to find a more crude way to enable/disable like those discussed above (remove the style element, etc).

Answer 4:

我能得到这个与设置残疾人财产，受包括“标题”属性的样式表工作。 title属性使得PREFERRED而非持久性的样式表。看到http://www.alistapart.com/articles/alternate/

Answer 5:

我发现一个伟大的方式（恕我直言）来实现这一目标：

让我们假设你知道你的样式表的准确顺序。比方说，你要交替样式0和1（第一和第二）：

为了得到一个样式表的状态（启用/禁用）你可以试试这个（即测试第二个）：

document.styleSheets[1].disabled

......它返回true或false 。

所以交替，你可以写在这段代码onclick事件：

document.styleSheets[0].disabled = !( document.styleSheets[1].disabled = !(document.styleSheets[1].disabled) );

HTH！

Answer 6:

对于我来说，如果该链接被禁用，document.styleSheets不返回集合中的链接（在Chrome）。只有启用链接返回。

我用document.head.getElementsByTagName（“链接”），把他们都弄到，出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;
            }
        }
    }

文章来源: enable disable stylesheet using javascript in chrome