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

Question

这是我的例子> http://jsfiddle.net/YXqu2/

我需要你的帮助。

我在我的盒子里附加了盒子，html这个盒子有前后元素，jQuery我随机给盒子元素一些背景，我也想改变前后元素的边框颜色我写了一些代码，但如果你能请它不起作用帮我。

对不起我的英语不好。

谢谢

Answer 1

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

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

小提琴演示

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

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

Answer 2

我尝试使用您已经存在的箭头添加 DIV append()，并将您的伪类切换为 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;
}

小提琴