Question

我正尝试应用一些针对类似问题的解决方案，但对我而言不起作用，因此我决定在此处提出问题。

我的页面上有一个生成HTML的Kendo.Window（）：

我正尝试通过以下方式将border-radius样式设置为div .k-widget .k-window元素：

div < .customTitle{
    border-radius:6px;
}

或

div .k-window < div .customTitle{
    border-radius:6px;
}

但这对我不起作用。

我该怎么做？

Answer 1

您可以在窗口的open事件上将自定义类添加到元素，并将该类用作样式的选择器。请参见下面的代码段。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
  
  <style>
    .customClass {
      border-radius: 6px;
    }
  </style>
</head>
<body>
  
<div id="dialog"></div>
  <button onclick="openWindow()">Open window</button>
<script>
$("#dialog").kendoWindow({
  visible: false,
  open: (e) => {
  	e.sender.wrapper.addClass("customClass");
  }
});
  
  function openWindow() {
    var dialog = $("#dialog").data("kendoWindow");
		dialog.open();
  }
</script>
</body>
</html>

如何为Kendo.Window（）生成的div元素（位于特定元素上方）指定样式？

1 个答案: