如何为位于特定元素正上方的 Kendo.Window() 生成的“div”元素指定样式？

【问题标题】：How can I specify styles for a Kendo.Window() generated `div` element located right above the specific one?如何为位于特定元素正上方的 Kendo.Window() 生成的“div”元素指定样式？
【发布时间】：2018-08-13 20:44:53
【问题描述】：

我试图应用一些针对类似问题指定的解决方案，但它对我不起作用，所以我决定在这里发布我的问题。

我的页面有一个生成 html 的 Kendo.Window()：

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

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

或

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

但这对我不起作用。

我该怎么做？

【问题讨论】：

标签： css kendo-ui kendo-window

【解决方案1】：

您可以在窗口的open 事件上向元素添加自定义类，并将该类用作样式选择器。请参阅下面的 sn-p。

<!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>

【讨论】：