如何在 jquery ui 中更改对话框标题颜色？答案

【问题标题】：How can I change dialog title color in jquery ui?如何在 jquery ui 中更改对话框标题颜色？
【发布时间】：2014-02-15 17:07:16
【问题描述】：

我有这样的事情：

$div = $('<div id="error" title="Error">');
$div.append('<p>Hi</p>');

$div.dialog({
    modal: true,
    maxHeight:500,
});

我可以像这样改变对话框标题的背景颜色吗？：

 $div.dialog({
        modal: true,
        maxHeight:500,
    }).find(".ui-dialog-titlebar").css("background-color","red");

【问题讨论】：

【解决方案1】：

使用prev() 而不是find()，因为该元素不在$div 内：

$div.dialog({
    modal: true,
    maxHeight:500,
}).prev(".ui-dialog-titlebar").css("background","red");

我还使用background 覆盖所有其他元素，例如background-image

【讨论】：

【解决方案2】：

另一种方法是：

定义你的样式类 - myTitleClass

定义css为

  . myTitleClass .ui-dialog-titlebar {
          background:red;
    }

并将自定义类添加到对话框初始化函数中：

     $( "#dialog" ).dialog({
        autoOpen: false,
        dialogClass: 'myTitleClass'
     });

JSFiddle -（但带有另一个示例代码）

【讨论】：

我认为这是最好的答案，因为它允许具有不同 css 的多个对话框，而无需即时更改它。
这种方法允许更改每一个对话框设计，同时保留 CSS 文件的复杂性。正如 Zak 所提到的，您不仅可以通过更改类名来拥有多种样式，而且您还可以通过更改源 CSS 文件来提供完全不同的设计和颜色选择。这个答案提供了迄今为止我发现的最佳方法。

【解决方案3】：

最简单的方法是这样的：-

.ui-dialog-titlebar {
      background:red;
}

【讨论】：