2

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

我有一个样式表列表，所有这些都在 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;
}
4

6 回答 6

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;
}
于 2012-10-10T20:38:00.413 回答
2

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

<body class="sheet1">

然后

sheet1.h1 {
 ...
}
sheet2.h1 {
 ...
}
于 2012-10-10T17:48:35.433 回答
2

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

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

于 2013-06-13T18:35:18.760 回答
0

I've found a great way (IMHO) to achieve this:

Let's suppose you know the exactly order of your stylesheet. Let's say you want to alternate stylesheet 0 and 1 (first and second):

To get a stylesheet state (enabled/disabled) you can try this (i.e. testing the second one):

document.styleSheets[1].disabled

...and it returns trueor false.

So to alternate you can write this code in an onclick event:

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

HTH!

于 2014-05-08T00:33:54.117 回答
0

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

于 2012-10-11T10:01:46.300 回答
0

对我来说，如果链接被禁用，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;
            }
        }
    }
于 2019-02-21T22:12:00.510 回答