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({});

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

您不能简单地定义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/

Answer 2

不要试图按照上面的方式去做，不要担心它是一个Kendo DropDownList。问题是，大部分时间都在Document.Ready中，小部件还没有准备好。因此，只要将其视为页面上的常规元素，直到它加载为止。这将节省您的时间负担。

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

这不是这篇文章的正确答案，因为这个解决方案不适用于背景色，但它可以与其他CSS一起使用。

在javascript中更改Kendo UI样式

2 个答案: