JS创建的style样式怎么使用变量？

Question

我有几个样式需要用JS去改变，因为还需要改变CSS伪类的样式，所以我得用JS创建style插入标签里面，然后在style里面写入要改变的样式，可是style里面的样式不能使用变量，而我现在的问题是样式的值必须使用变量？
代码如下：

$('html').append("<style>.className:after{background:red;border-color:green}</style>");

现在样式的值只能直接写，而我想要样式的值可以使用变量，比如：

var bgColor = red,
    borderColor = green;
$('html').append("<style>.tanmu-contain-171208 .tanmu-content-171208{.className:after{background:bgColor;border-color:borderColor}</style>");

能实现吗？还有其他的方法实现吗

Answer 1

es6 字符串拼接
var bgColor = red,

borderColor = green;

$('html').append(<style>.tanmu-contain-171208 .tanmu-content-171208{.className:after{background:${bgColor};border-color:${borderColor}}</style>);

Answer 2

一定要改变伪类的样式吗？你的应用场景是什么？

Answer 3

你这append里面是个字符串啊 既然是字符串 那么就可以字符串拼接

Answer 4

var color = "color:red";
$("#main").append("<div style='"+color+"'>123</div>")

帮你实现了，不过少年我觉得你很有想法啊- - 这样做其实问题很大不好维护，而且拼字符串很容易出问题
为啥不单独建一个css类直接添加呢，也比较好管理和修改

Answer 5

你可以进行字符串拼接。然后动态的添加到节点上就好了。