鍍金池/ 問答/HTML/ JS創(chuàng)建的style樣式怎么使用變量?

JS創(chuàng)建的style樣式怎么使用變量?

我有幾個樣式需要用JS去改變,因為還需要改變CSS偽類的樣式,所以我得用JS創(chuàng)建style插入標(biāo)簽里面,然后在style里面寫入要改變的樣式,可是style里面的樣式不能使用變量,而我現(xiàn)在的問題是樣式的值必須使用變量?
代碼如下:

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

現(xiàn)在樣式的值只能直接寫,而我想要樣式的值可以使用變量,比如:

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

能實現(xiàn)嗎?還有其他的方法實現(xiàn)嗎

回答
編輯回答
半心人

es6 字符串拼接
var bgColor = red,

borderColor = green;

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

2017年10月18日 08:17
編輯回答
夢囈

一定要改變偽類的樣式嗎?你的應(yīng)用場景是什么?

2018年3月31日 21:47
編輯回答
毀與悔

你可以進行字符串拼接。然后動態(tài)的添加到節(jié)點上就好了。

2017年11月13日 10:13
編輯回答
撥弦

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

2018年2月23日 12:24
編輯回答
故林
var color = "color:red";
$("#main").append("<div style='"+color+"'>123</div>")

幫你實現(xiàn)了,不過少年我覺得你很有想法啊- - 這樣做其實問題很大不好維護,而且拼字符串很容易出問題
為啥不單獨建一個css類直接添加呢,也比較好管理和修改

2018年2月10日 19:42