使用JavaScript创建预制CSS变量

Question

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

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

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";