jQuery在元素之后和之前更改背景颜色框

这是我的例子>

我需要你的帮助

我在我的

html

中添加了框，这个框有after和before元素，并且使用

jQuery

我随机给框元素添加了一些背景，我还想更改before和after元素的边框颜色。我写了一些代码，但是如果你能帮我的话，它不起作用

对不起，我的英语不好

---

谢谢

您不能使用jquery更改psuedo类的样式，因为您无法选择它们，但您可以将新的样式元素注入头部以更改它们

HTML

容器

JS

var redAfter=jQuery（'.container:after{border:1px solid#F00；}'）；
var blueAfter=jQuery（'.container:after{border:1px solid#00f；}'）；
jQuery（“#change1”）。单击（函数（）{
blueAfter.remove（）；
jQuery（“head”）.append（redAfter）；
});
jQuery（“#change2”）。单击（函数（）{
redAfter.remove（）；
jQuery（“head”）.append（blueAfter）；
});

我不知道这是否会导致性能方面的任何问题。如果您有很多需要更改的伪元素等，那么可能会出现这种情况。我认为保留样式的对象，以便在不需要时删除它们可能会很好。也不确定这在chrome中的跨浏览器兼容性如何

---

如果可能的话，您可能应该将代码更改为使用实际对象而不是伪对象。

您不能使用jquery来更改psuedo类的样式，因为您无法选择它们，但是您可以将新的样式元素注入头部来更改它们

HTML

容器

JS

var redAfter=jQuery（'.container:after{border:1px solid#F00；}'）；
var blueAfter=jQuery（'.container:after{border:1px solid#00f；}'）；
jQuery（“#change1”）。单击（函数（）{
blueAfter.remove（）；
jQuery（“head”）.append（redAfter）；
});
jQuery（“#change2”）。单击（函数（）{
redAfter.remove（）；
jQuery（“head”）.append（blueAfter）；
});

我不知道这是否会导致性能方面的任何问题。如果您有很多需要更改的伪元素等，那么可能会出现这种情况。我认为保留样式的对象，以便在不需要时删除它们可能会很好。也不确定这在chrome中的跨浏览器兼容性如何

---

如果可能的话，您可能应该将代码更改为使用实际对象而不是伪对象。

我尝试使用已有的

append（）

为箭头添加div，并将伪类切换为classe

JS:

$(".line").append("<div class='arrowLeft' style='border-left:12px solid " + random_color + ";'></div><div class='arrowRight' style='border-right:12px solid " + random_color + ";'></div><div class='lines_type' style='background:" + random_color + ";'></div>");

.line .arrowLeft {
    border-bottom: 7px solid transparent;
    border-left: 12px solid orange;
    border-top: 7px solid transparent;
    content:"";
    height: 0;
    margin-right: -4px;
    margin-top:70px;
    float:right;
    width: 0;
}
.line .arrowRight {
    border-bottom: 7px solid transparent;
    border-right: 12px solid orange;
    border-top: 7px solid transparent;
    content:"";
    height: 0;
    margin-left: -4px;
    margin-top:70px;
    float:left;
    width: 0;
}

---

我尝试在已有的

append（）

中为箭头添加div，并将伪类切换到classe

JS:

$(".line").append("<div class='arrowLeft' style='border-left:12px solid " + random_color + ";'></div><div class='arrowRight' style='border-right:12px solid " + random_color + ";'></div><div class='lines_type' style='background:" + random_color + ";'></div>");

.line .arrowLeft {
    border-bottom: 7px solid transparent;
    border-left: 12px solid orange;
    border-top: 7px solid transparent;
    content:"";
    height: 0;
    margin-right: -4px;
    margin-top:70px;
    float:right;
    width: 0;
}
.line .arrowRight {
    border-bottom: 7px solid transparent;
    border-right: 12px solid orange;
    border-top: 7px solid transparent;
    content:"";
    height: 0;
    margin-left: -4px;
    margin-top:70px;
    float:left;
    width: 0;
}

---

不能使用javascript或jquery进行更改。我希望更改颜色而不是内容伪元素本身不是DOM的一部分。如果不可能的话，你想改变什么很重要吗？？？好的，我怎样才能做我想做的。你知道吗？你不能用javascript或jquery来改变。我希望更改颜色而不是内容伪元素本身不是DOM的一部分。如果不可能的话，你想改变什么很重要吗？？？好的，我怎样才能做我想做的。有什么想法吗？