在 javascript 中更改 Kendo UI 样式答案

【问题标题】：Change Kendo UI style in javascript在 javascript 中更改 Kendo UI 样式
【发布时间】：2013-09-18 19:41:44
【问题描述】：

我必须更改 javascript 中某些控件的背景颜色。我找到了 DropDownList 和 ComboBox 的方法，但我找不到任何关于 DatePicker 的信息？奇怪的是，没有标准的方法可以做到这一点，因为似乎没有控制可以让您访问相同的元素。例如，要在下拉列表中做我想做的事，我访问“span”：

$("#myDropDown").data("kendoDropDownList").span.css("background-color", "#BDD1FF");

使用组合框时，您可以访问“输入”元素：

$("#myComboBox").data("kendoComboBox").input.css("background-color", "#BDD1FF");

然而，这些都不适用于 kendoDatePicker。有人知道路吗？我尝试直接访问 css（如在 JQuery 中）但没有运气。

编辑：我只需要更改表单中的几个控件，而不是全部。这就是为什么我不能覆盖剑道 CSS。仅当我的视图模型处于编辑模式时，我还需要应用此背景。因此，我需要能够切换类，这就是我在考虑 JavaScript 的原因。

【问题讨论】：

标签： jquery css kendo-ui

【解决方案1】：

最简单的方法是定义自己的 CSS 来应用颜色。您可以在单个命令中执行以下操作：

.k-input {
    background: #BDD1FF !important;
}

那么使用它你不需要做任何特别的事情，只需：

$("#myKendoDropDown").kendoDropDownList().data("kendoDropDownList");
$("#myComboBox").kendoComboBox({}).data("kendoComboBox");
$("#myDate").kendoDatePicker({});

注意几个问题很重要：

您不能简单地定义background-color，因为KendoUI 还使用背景图像和其他背景属性，因此您需要将它们全部覆盖。
!important 实际上很重要，因为您想覆盖 background 的后验定义。

此处示例：http://jsfiddle.net/OnaBai/Nxv3B/

编辑：如果您想以编程方式进行操作以便控制哪些元素，那么您应该这样做。

var dd1 = $("#myKendoDropDown1").kendoDropDownList().data("kendoDropDownList");

用于创建小部件，然后用于应用样式：

dd1.wrapper.find(".k-input").css("background", "#BDD1FF");

在此处查看小提琴修饰符：http://jsfiddle.net/OnaBai/Nxv3B/5/

【讨论】：

我编辑了我的问题以解释为什么我认为我不能覆盖剑道 CSS

【解决方案2】：

与其尝试以上述方式进行操作，不如担心它是一个 Kendo DropDownList。问题是，大多数时候在 Document.Ready 中，小部件还没有准备好。因此，只需将其视为页面上的普通元素，直到它加载为止。这将为您节省大量时间。

$("#myKendoDropDown1").css("width", 220);

这不是这篇文章的正确答案，因为此解决方案不适用于背景色，但它适用于其他 CSS。

【讨论】：