使用JavaScript创建预制CSS变量

Question

假设我正在处理一个大页面。 我想将一些CSS样式预先定义为JavaScript中的变量，以便以后使用。 可能吗？ 语法是什么？

我正在尝试做这样的事情：

var box = document.querySelector('.box'); 
var styleColor = style.color;
var red = "red"

box.onclick = function(){styleColor.red;}

我知道您可以这样做：

var box = document.querySelector('.box');

box.onclick = function(){box.style.color = "red";}

但是我想缓存CSS，以便以后可以重复使用。 如果可能，语法是什么样？

Answer 1

将您的css写入普通的CSS文件中。 例如：

.myRedClass { color: red; }

然后将一个类附加到您希望在javascript中变为红色的元素，如下所示

var element = document.getElementById(elementId);
element.className += " " + "myRedClass";