如何使用 jQuery 在 Materialise 设计中更改 datepicker 表单的背景颜色？答案

【问题标题】：How to change background color of datepicker form in Materialize design using jQuery?如何使用 jQuery 在 Materialise 设计中更改 datepicker 表单的背景颜色？
【发布时间】：2016-08-29 15:04:19
【问题描述】：

我在 materialize design 中使用日期选择器，我正在尝试使用 jQuery 更改背景颜色。

Materialize Calendar

我试过这条线，但它不起作用

$(".picker__weekday-display").css("color", "#FF0F0F", "important");

我需要使用 JavaScript，因为我必须动态更改颜色。

【问题讨论】：

标签： javascript jquery css datepicker

【解决方案1】：

您对$.css() 的使用不正确 - 您还需要使用background 或background-color 而不是color。

你可以写

$(".picker__weekday-display").css("background-color", "#FF0F0F !important")

或

$(".picker__weekday-display").css({"background-color": "#FF0F0F !important"})

查看 API：

http://api.jquery.com/css/#css-propertyName-value

不过，API 还声明：

注意：.css() 忽略 !important 声明。因此，语句 $( "p" ).css( "color", "red !important" ) 不会将页面中所有段落的颜色变为红色。强烈建议改用类；否则使用 jQuery 插件。

所以你最好添加一个类：

$(".picker__weekday-display").addClass("my-class");

CSS：

.my-class {
  background-color: #FF0F0F !important;
}

【讨论】：

我试过这个： $(".picker__date-display").css({ "background-color": "#ff00ff !important" }) 仍然不起作用:(但我改变了我的标题颜色用这个： $(".customColor").css("background-color", "#ff00ff") 它工作得很好，我不明白为什么它不能与物化日期选择器一起工作：S
您是否尝试过改用 CSS 类？获得比现有修饰符更高的CSS specifity 非常重要。请参阅developer.mozilla.org/en-US/docs/Web/CSS/Specificity - 您可以在浏览器的控制台中看到应用/覆盖的样式。
是的，我试过这样： $(".picker__date-display").addClass(".customColor") .customColor 是我的标题的颜色仍然不起作用如果我在我的 css 中更改它文件，它工作得很好，但我必须动态改变它，所以我必须用 jQuery 来做
点 . 只能添加到样式表中（参见我上面的示例）。您不能在addClass() 函数中添加点：$(".picker__date-display").addClass("customColor")。正如我也说过的，您必须确保实现比其他现有背景颜色修改更高的 CSS 特异性（使用样式表选择器）。
感谢您的帮助，我的第一线工作完美，只是位置不对

【解决方案2】：

您确定在 $(document).ready 中添加了 javascript 吗？如果日历未初始化，它将找不到您的班级。

【讨论】：

天啊..我太菜鸟了..我的线工作完美..我只是没有把它放在正确的地方！谢谢

【解决方案3】：

color 是前景（文本）颜色。使用backgroundColor。

【讨论】：

我复制了错误的行：S 我不好的是使用背景颜色