Jquery“拒绝”更新CSS？

Question

我有一个类fd-video-upload-box的div，它的风格有这个元素：

background-color: rgb(236, 238, 239);
outline: 1px dashed gray !important;

显示正确。

来自Javascript的

，作为对某个事件的回应，我正在尝试申请以下两个更改：

$('.fd-video-upload-box').css({'background-color' : 'red', 'outline' : '1px dashed rgba(255,255,255,0.5) !important'}); 

结果是：

• 背景颜色确实变为红色
• outline 完全被忽略。它甚至不会作为被覆盖的元素出现在Chrome工具中。它显示如下：

我可以手动添加它并且工作正常：

我的问题是：为什么JQuery不更新我的outline元素？

Answer 1

jQuery的css()方法忽略了!important。来自css()的jQuery文档：

  

注意：.css（）忽略！重要声明。所以，声明$（＆＃34; p＆＃34;   ）.css（＆＃34;颜色＆＃34;，＆＃34;红色！重要＆＃34;）不会变成所有颜色   页面中的段落为红色。强烈建议使用课程   代替;否则使用jQuery插件。

您可以使用cssText设置这些定位css()的属性，而不是：

$('.fd-video-upload-box').css('cssText', "background-color: red; border: 1px dashed rgba(255,255,255,0.5);");

否则，如文档所示，您可以创建一个包含这些属性的类，并使用类似addClass()的内容：

.foo {
  background-color: red;
  border: 1px dashed rgba(255,255,255,0.5) !important;
}

$('.fd-video-upload-box').addClass('foo');

以下是展示行动功能的jsfiddle。

希望这有帮助！

谢谢！