Question

是否可以在CSS变量中添加类名，或者是否可以通过其他方法进行设置，这样我就不必直接通过javascript操作每个单独的变量？我想将所有样式保留在CSS中，并仅使用JS打开相关的类。例如，如果在CSS中可能发生类似情况：

Public Class Form2
    Public Sub New(person As Person)

        InitializeComponent()

        lblFirstName.DataBindings.Add("Text", person, NameOf(person.FirstName), True)
        lblLastName.DataBindings.Add("Text", person, NameOf(person.LastName), True)
        lblFullName.DataBindings.Add("Text", person, NameOf(person.FullName), True)
    End Sub
End Class

然后，我可以直接从javascript切换:root.white{ --bgcol:#FFF; --col:#000; } :root.black{ --bgcol:#000; --col:#FFF; }或.black类，以触发所有变量的更改。这种设置的最佳方法是什么？

Answer 1

坦率地说，这是最好的方法（与大多数习惯用法一样），即使用类名（如果不是完全分开的样式表（as has been tradition for many, many years），则通过自定义属性对整个布局进行主题化。这是最“基本的CSS”方法，JavaScript只是使主题切换起作用的粘合剂。你真的不能做得更好。

对于那些不知道:root意味着什么并且想知道确切在哪里应用类名的人，它是html元素（body的父元素）。因此，这里没有什么特别的事情-您只需在html元素上切换类名。碰巧，由于习惯上为文档根元素定义了全局自定义属性，因为它位于继承链的顶层。

如果您有任何与主题无关的自定义属性以及适用于根元素的样式属性（即非自定义属性），请将其保留在自己的不合格:root规则中，并与主题的自定义属性分开，因此它们不会受到主题切换的影响。这是一个示例：

const root = document.documentElement;

// Default theme - should assign declaratively in markup, not JS
// For a classless default theme, move its custom properties to unqualified :root
// Again, keep it separate from the other :root rule that contains non-theme props
// Remember, the cascade is your friend, not the enemy
root.classList.add('white');

document.querySelector('button').addEventListener('click', function() {
  root.classList.toggle('white');
  root.classList.toggle('black');
});

:root {
  --spacing: 1rem;
  color: var(--col);
  background-color: var(--bgcol);
}

:root.white {
  --bgcol: #FFF;
  --col: #000;
}

:root.black {
  --bgcol: #000;
  --col: #FFF;
}

p {
  margin: var(--spacing);
  border: thin dashed;
  padding: var(--spacing);
}

<button>Switch themes</button>
<p>Hello world!

Answer 2

使用:root选择器与使用html相同，不同之处在于它的特异性更高，因此使用此方法没有问题。

例如：

:root {
  --bg: red;
}
:root.blue {
  --bg: blue;
}
// ...
div {
  background: var(--bg);
}

稍后，您只需更改html的类，变量就会更改。

您可以看到示例in this fiddle。

我可以在CSS变量中添加类名吗？

2 个答案: