如何动态创建可被早期规则重写的css样式规则

How to dynamically create a css style rule that is overridable by earlier rules

本文关键字：规则 重写 样式 css 何动态 动态 创建      更新时间：2024-04-19

我一直在我的项目中使用js来进行动态样式。这在很大程度上起到了很好的作用，但我想做一些似乎没有帮助的事情。

我希望能够首先创建一组主样式规则，然后创建一组默认样式规则，如果主样式规则冲突，这些规则可以被覆盖。示例：

<div class="mainClass1 defaultClass1">text</div>
<script>
jss.set('.mainClass1', {
  color: 'red'
})
jss.set('.defaultClass1', {
  color: 'green'
})
</script>

我希望结果是文本是红色的，但按照jss的操作方式，文本是绿色的。我希望我能以某种方式创建两个动态样式表，第一个是"default"表，第二个是"main"表（这样main就会覆盖默认值）。这可能吗？

更新-我确认了一种适用于原始javascript:的技术

var styleNode = document.createElement('style');
styleNode.type = 'text/css';
styleNode.rel = 'stylesheet';
document.head.appendChild(styleNode);
//styleNode.sheet.insertRule("#A" + ' { color:green; }', 1);
var styleNode2 = document.createElement('style');
styleNode2.type = 'text/css';
styleNode2.rel = 'stylesheet';
document.head.appendChild(styleNode2);
styleNode2.sheet.insertRule("#A" + ' { color:green; }', 0);
styleNode.sheet.insertRule("#A" + ' { color:red; }', 0);

id为"A"的元素即使在早期的样式表中添加了红色样式后仍保持绿色。现在我只是想知道我是否可以用jss做到这一点，或者我是否需要推出自己的东西。

为什么这不起作用？

var jss1 = jss.forDocument(document)
var jss2 = jss.forDocument(document)
jss2.set('#A', {
    color: 'green'
})
jss1.set('#A', {
    color: 'red'
})

对jss源代码的简短检查让我相信，您的答案在于创建不同的样式表。从我的简短阅读来看，后来创建的样式表中的CSS似乎覆盖了以前创建的样式图中的CSS。

"读取源"

使用CSS选择器

您可以非常简单地做到这一点，只需使用多个类选择器：

jss.set('.defaultClass1.mainClass1', {...});

这比.defaultClass选择器具有更高的类别特异性。

使用JSS扩展插件

这个JSS插件简化了扩展样式。例如，您可以这样做（从存储库中的示例复制。

var button0 = {
    padding: '20px',
    background: 'blue'
}
var redButton = {
    background: 'red'
}
window.styles = {
    button0: button0,
    button1: {
        extend: [button0, redButton],
        'font-size': '20px'
    }
}

这将button0和button1样式注册到当前窗口（就像链接CSS文件一样）。

好吧，我发现了如何使用jss:

<div id="a">A div</div>
<script>
    var jss1 = jss.forDocument(document)
    jss1.defaultSheet = jss1._createSheet()
    var jss2 = jss.forDocument(document)
    jss2.defaultSheet = jss2._createSheet()
    jss2.set('#A', {
        color: 'green'
    })
    jss1.set('#A', {
        color: 'red'
    })
</script>

我发现jss懒散地创建它的工作表。因此，如果您想确保样式表的顺序，您需要使用_createSheet提前创建它们。

相关文章：