Question

我想用jQuery修改箭头 -element的边框，但它不会被修改。
但它适用于CSS。

HTML＆GT;＆GT;

    <div class="pointer">
        <div class="arrow"></div>
        <div class="arrow_border"></div>
    </div>

JQUERY＆GT;＆GT;

    $('.arrow_border').css({'border':'rgb(0, 0, 0, 0) rgb(rgb(219, 0, 219) rgb(0, 0, 0) rgb(0, 0, 0) !important;'});
    $('.arrow_border').css({'border-color':'rgb(0, 0, 0, 0) rgb(rgb(219, 0, 219) rgb(0, 0, 0) rgb(0, 0, 0) !important;'});

CSS＆gt;＆gt;

    .arrow, .arrow_border {
        border-color: rgba(0, 0, 0, 0) rgb(80, 255, 255) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
        border-width: 11px;
        border-style: solid;
        font-size: 0;
        left: 50%;
        line-height: 0;
        margin: 0 auto;
        position: absolute;
        top: 0;
        width: 0;
        z-index: 1002;
        left: 0;
        margin-left: 45%;
    }

Answer 1

使用JavaScript设置样式属性与使用CSS完全相同。

您仍然可以在jQuery中使用字符串属性名称，但我建议使用JavaScript等效属性。例如borderColor代替'border-color'。 jQuery为您翻译它，但任何翻译都会使您的脚本变慢。

!important无法在JavaScript中使用，因为它不是实际值。有方法，但我不会去那里。这也是完全没必要的，因为它已经比样式表中的任何东西具有更高的优先级。（specificity）

设置边框将覆盖css之前设置的每个属性。您应该尽可能具体地覆盖。在这种情况下，您应该使用：

$('.arrow_border').css({
  borderRightColor: 'rgb(219, 0, 219)'
});

如果要设置border属性，还必须再次包含边框宽度和边框样式。这与CSS（文件）中的行为相同。

Answer 2

Verry很好地解释了René你应该阅读它，如果你想设置很多属性，它应该是这样的：http://jsfiddle.net/vjaJg/3/

$('.arrow_border').css({
    'borderRightColor'   : 'rgba(120,255,255,0.9)',
    'borderLeftColor'    : 'rgba(255,120,255,0.9)',
    'borderTopColor'     : 'rgba(255,255,120,0.9)',
    'borderBottomColor'  : 'rgba(120,255,255,0.9)'
});

jquery在元素中应用rgb边框

2 个答案: