在 chrome 中使用 javascript 启用禁用样式表答案

【问题标题】：enable disable stylesheet using javascript in chrome在 chrome 中使用 javascript 启用禁用样式表
【发布时间】：2019-02-22 06:24:16
【问题描述】：

问题的改写：为文档提供备用样式表的最佳方式是什么？

我有一个样式表列表，所有这些都在 html 文件中引用。我使用 javascript 来禁用除一个文件之外的所有文件。

示例：

style1   disabled = false
style2   disabled = true

实际上，要加载的最后一个样式表 (style2) 是活动样式表，与 disabled 属性无关。

如何在 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;
}

编辑： 原来问题完全是由于代码中的错误。 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;
}

【问题讨论】：

您能告诉我们您的实际代码吗？我本来希望disabled property 也能工作
一种安全的方法是从 DOM 中删除元素，但我不确定这是否是您想要的。

标签： javascript stylesheet

【解决方案1】：

一般来说，您会从 BODY 标记子类化并使用使用这些类的单个样式表。然后只需交换 BODY 类，而不是样式表。否则，您应该在服务器端执行此操作。

<body class="sheet1">

然后

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

【讨论】：

不是他想要的。使用 rel="alternate stylesheet" w3.org/Style/Examples/007/alternatives.en.html 原生支持交换，他想使用 JavaScript 进行交换。
那么他应该移除/注入到 DOM 中样式表的 LINK。
感谢您提供的 3 个选项：正文标记子类、“备用样式表”和替换链接。我目前正在研究这篇文章：alistapart.com/articles/alternate

【解决方案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;
}

【讨论】：

谢谢。我可以设置 disabled 属性。它只是不影响任何事情。最后一个要加载的 stylehsset 仍然有效，即使它被禁用了。

【解决方案3】：

当前的浏览器提供了通过使用“禁用”DOM 属性（Gecko）或添加/删除禁用属性（Webkit 和 IE）来动态启用/禁用样式表的合理能力。不幸的是，除非您使用的是 IE10+，否则这些方法仅适用于引用外部样式表的“链接”标签（而不是“样式”标签）。是的 - 我说过 - 只有 IE 在这里做正确的事情。

对于在非 IE 浏览器上使用“样式”标签的内联 CSS，您需要找到一种更粗略的方法来启用/禁用，就像上面讨论的那样（删除样式元素等）。

【讨论】：

【解决方案4】：

我能够通过设置禁用属性和在样式表中包含“标题”属性来实现此功能。 title 属性使样式表成为 PREFERRED 而不是 PERSISTENT。见http://www.alistapart.com/articles/alternate/

【讨论】：

【解决方案5】：

我找到了实现这一目标的好方法（恕我直言）：

假设您知道样式表的确切顺序。假设您要交替样式表 0 和 1（第一个和第二个）：

要获得样式表状态（启用/禁用），您可以试试这个（即测试第二个）：

document.styleSheets[1].disabled

...它返回true或false。

因此，您可以在onclick 事件中编写此代码：

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

HTH！

【讨论】：

【解决方案6】：

对我来说，如果链接被禁用，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;
            }
        }
    }

【讨论】：