Question

我需要你的帮助。

我在我的html中添加了一个框，这个框有元素之后和jQuery我随机给框元素一些背景，我想要改变前后元素边框颜色我写一些代码，但如果你能帮助我就行不通。

抱歉我的英语不好。

谢谢

Answer 1

你不能使用jquery来改变psuedo类的样式，因为你不能选择它们，但你可以在头部注入一个新的样式元素来改变它们

HTML

<div class="container">
Container       
</div>

JS

var redAfter = jQuery('<style>.container:after{border:1px solid #F00; }</style>');
var blueAfter = jQuery('<style>.container:after{border:1px solid #00f; }</style>');

jQuery("#change1").click(function(){
   blueAfter.remove();
   jQuery("head").append(redAfter);
});

jQuery("#change2").click(function(){
   redAfter.remove();
   jQuery("head").append(blueAfter);
});

Fiddle Demo

我不知道这是否会导致任何问题表现明智。如果你有很多伪元素你可能需要改变等等。我认为保留一个样式的对象，所以你可以在不需要时删除它们可能是好的。也不确定这是如何与浏览器兼容，适用于chrome。

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

Answer 2

我尝试使用已存在的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>");

CSS：

.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;
}

Fiddle

jQuery更改元素之后的背景颜色框

2 个答案: