我想更深入地了解以下渲染逻辑:
最初没有应用这些样式表:
<link rel="alternate stylesheet" title="x">
<link rel="alternate stylesheet" title="x">
应用了两个样式表:
<link rel="stylesheet" title="x">
<link rel="alternate stylesheet" title="x">
应用的第一个样式表:
<link rel="stylesheet" title="x">
<link rel="stylesheet" title="y">
// OR
<style title="x"></style>
<style title="y"></style>
我了解前两种情况,但不了解最后一种情况 - 最近花了我一些时间。因为如果您添加两个具有不同标题的样式元素,它会创建两个具有不同标题的 CSSStyleSheet 对象。因此我认为我们可以通过它的标题来识别 CSSStyleSheet 并修改它的 cssRules 但第二个从未被渲染过。所以最后我设置了你可以通过 ownerNode.id 访问的 id 并留下了标题 - 但我想更深入地了解为什么他们已经实现了这个逻辑......对我来说是两个不同的标题将意味着两个不同的样式表,因此应该呈现它们。
最佳答案
参见 Correctly Using Titles With External Stylesheets和 Alternative style sheets在 MDN 或 Alternative Style: Working With Alternate Style Sheets在 A List Apart 上。
简而言之,样式表始终是以下之一:
- 持久性(无
rel="alternate"
,无title=""
):始终适用于文档。 - Preferred(无
rel="alternate"
,指定了title="..."
):默认应用,但禁用如果选择了备用样式表。 只能有一个首选样式表,它解释了第三个示例中的行为。 - Alternate(必须指定
rel="stylesheet alternate"
,title="..."
):默认禁用,可以被选中。
我觉得你的 document.styleSheets[i].ownerNode.id
解决方案不错。
关于javascript - 不应用具有不同标题的 CSS 样式表 - 即使没有 rel ="alternative",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32839683/