Javascript jquery更新边框颜色而不覆盖边框左侧颜色

我有一个css元素：

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

我想用javascript边框颜色进行更新，而不覆盖左边框颜色。没有黑客，这可能吗？如果我尝试这样做：

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

---

它还将更新左边框颜色。

简单的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
});

我不宽恕滥用

！重要的

，因为它可能并不总是被认为是必须的，但经常被认为是必须的，所以将不同的样式应用于某类元素的较小组应该是可能的

---

因此我认为

！重要信息

当覆盖JavaScript所做的样式更改时，这里的规则非常有用。

简单的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
});

我不宽恕滥用

！重要的

，因为它可能并不总是被认为是必须的，但经常被认为是必须的，所以将不同的样式应用于某类元素的较小组应该是可能的

---

因此我认为

！重要信息

当覆盖JavaScript所做的样式更改时，这里的规则非常有用。

使用普通的类属性-jQuery的

。css

在性能方面没有那么好

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

CSS:

---

使用普通的类属性-jQuery的

.css

在性能上不是很好

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

CSS:

---

在

.css（）中使用对象

参见下面的示例


$（'test'）。在（'click'，函数（）{
$（“#myElement”）.css({
“边框顶部颜色”：“000”，
“边框顶部样式”：“实心”，
“右边框样式”：“实心”，
“边框底部样式”：“实心”，
“右边框颜色”：“abc”，
“边框底色”：“绿色”，
});
});

试验
在
.css（）中使用对象

参见下面的示例


$（'test'）。在（'click'，函数（）{
$（“#myElement”）.css({
“边框顶部颜色”：“000”，
“边框顶部样式”：“实心”，
“右边框样式”：“实心”，
“边框底部样式”：“实心”，
“右边框颜色”：“abc”，
“边框底色”：“绿色”，
});
});

试验
试试这个

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

试试这个

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

为什么不更新右边框、上边框和下边框？我在这里打字很容易。为了尽量减少前端代码。它是更复杂代码的一部分，因为元素根据颜色选择器从另一个元素更改而获得不同的颜色。这是一个微观优化。它不是微观优化，因为实际情况要复杂得多，它涉及到颜色选择器，将css规则从元素a应用到不同的css规则到不同的元素。。。我只举了一个简单的例子。然后你把你的例子简单化了。为什么不更新右边框、上边框和下边框呢？我在这里打字很容易。为了尽量减少前端代码。它是更复杂代码的一部分，因为元素根据颜色选择器从另一个元素更改而获得不同的颜色。这是一个微观优化。它不是微观优化，因为实际情况要复杂得多，它涉及到颜色选择器，将css规则从元素a应用到不同的css规则到不同的元素。。。我只举了一个简单的例子。然后你把你的例子简化得太简单了。1）内联样式有更高的优先级，所以不起作用2）不要滥用
！重要信息
。即使两种样式都是内联的，它仍将覆盖！以上案例中的重要规则。@Christoph我想我理解错了，或者我遗漏了一些东西，因为我认为
！在重写JavaScript所做的样式更改时，important
非常有用，这样我就不认为我们在滥用标记了。注意，我还用小提琴编辑了我的答案。
的问题！重要的是，它打破了css的级联特性，因此可能导致巨大的问题，特别是在大型应用程序中。。。我撤销了我的-1，因为我奇怪地错误地认为内联的优先级高于重要的外部规则，但出于上述原因，我不会给出+1。@Christoph我不能不同意。1）内联样式不起作用，因为内联样式的优先级更高2）不要滥用
！重要信息
。即使两种样式都是内联的，它仍将覆盖！以上案例中的重要规则。@Christoph我想我理解错了，或者我遗漏了一些东西，因为我认为
！在重写JavaScript所做的样式更改时，important
非常有用，这样我就不认为我们在滥用标记了。注意，我还用小提琴编辑了我的答案。
的问题！重要的是，它打破了css的级联特性，因此可能导致巨大的问题，特别是在大型应用程序中。。。我撤销了我的-1，因为我奇怪地错误地认为内联规则优先于重要的外部规则，但基于上述原因，我不会给出+1。@Christoph我不能不同意。不幸的是，这并不能解决我的问题。在您的示例中，应用了不同的边界。在我的例子中，我应用单边框颜色，它覆盖了左边框颜色。这是我的问题，问题是如何在不覆盖border-left-color的情况下应用边框颜色。不幸的是，这并不能解决我的问题。在您的示例中，应用了不同的边界。在我的例子中，我应用单边框颜色，它覆盖了左边框颜色。这是我的问题，问题是如何应用边框颜色而不覆盖边框左侧颜色。