javascript - Jquery "refuses"更新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'}); 

结果是:

• 背景颜色确实变成了红色
• 但是，大纲被完全忽略。它甚至不会作为覆盖元素出现在 Chrome 工具中。它显示如下:

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

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

Answer 1

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

Note: .css() ignores !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red. It's strongly advised to use classes instead; otherwise use a jQuery plugin.

您可以使用 css() 来设置这些针对 cssText 的属性:

$('.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演示实际功能。

希望有帮助!

谢谢!