Question

我有这个css的元素：

border: 20px solid;
border-color:#4ea88e;
border-right-width: 10px; 
border-left-color: transparent;

我想用javascript border-color更新而不覆盖border-left-color。没有黑客可能吗？如果我试试这个：

$("#myElement").css('border-color','#ffffff')

它还会更新border-left-color。

Answer 1

使用普通的类属性 - jQuery的.css在性能上并不是很好。

$("#myElement").addClass("datBorder");

CSS：

.datBorder {
    border-color: #4ea88e;
    border-left-color: #ffffff;
}

Answer 2

使用.css()

中的对象

$("#myElement").css({
        'border-top-color': '#000',
        'border-top-style': 'solid',
        'border-right-style': 'solid',
        'border-bottom-style': 'solid',
        'border-right-color': '#abc',
        'border-bottom-color': 'green',
    });

请参阅下面的示例

$('#test').on('click', function () {
        $("#myElement").css({
            'border-top-color': '#000',
            'border-top-style': 'solid',
            'border-right-style': 'solid',
            'border-bottom-style': 'solid',
            'border-right-color': '#abc',
            'border-bottom-color': 'green',
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">Test</button>
<div id="myElement" style="width: 200px; height: 200px; background-color: yellow"></div>

Answer 3

试试这个......

var orgBorderColor= $("#myElement").css("border-color");
$("#myElement").css('border-color','#ffffff');
$("#myElement").css('border-left-color',orgBorderColor);

Answer 4

使用css的简单小技巧

#el {
   border: 20px solid;
   border-color:#4ea88e;
   border-right-width: 10px; 
   border-left-color: transparent !important;
}

编辑：我不明白这是怎么回事：

$(document).ready(
   $('#el').css('border-color','#111'); // or any other color for that matter
});

https://jsfiddle.net/6rk08kfL/

我不容忍滥用!impotant，因为它可能并不总是被视为必须，但通常情况下，应该可以将不同的风格应用于某类元素的较小组。< / p>

因此，我认为在覆盖JavaScript所做的样式更改时，!important规则会派上用场。

jquery更新边框颜色而不覆盖border-left-color

4 个答案: