在javascript中更改Kendo UI样式

Question

我必须在javascript中更改某些控件的背景颜色.我找到了DropDownList和ComboBox的方法,但我找不到有关DatePicker的任何内容？奇怪的是,没有标准的方法可以做到这一点,因为没有控件似乎可以让你访问相同的元素.例如,要在下拉列表中执行我想要的操作,我访问"span":

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

使用组合框时,您可以访问"input"元素:

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

然而,这些都不适用于kendoDatePicker.谁知道的方式？我尝试直接访问css(比如在JQuery中),但没有运气.

编辑:我需要在我的表单中只更改一些控件,而不是全部.这就是我无法覆盖kendo CSS的原因.我还需要在我的视图模型处于编辑模式时应用此背景.因此,我需要能够切换类,这就是我在思考JavaScript的原因.

Answer 1

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

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

然后使用它你不需要做任何特别的事情,只需:

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

重要的是要注意几个问题:

1. 您不能简单地定义,background-color因为KendoUI也使用背景图像和其他背景属性,因此您需要覆盖所有这些属性.
2. !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/