Как установить цвет фона заголовка jQuery?

Question

Моя страница имеет 2 jQuery dialogs. Когда страница генерируется как <div> элементы имеют одинаковые class определения:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
    <span class="ui-dialog-title" id="ui-dialog-title-dvMonitor">Monitor Status</span> 
</div> 

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
    <span class="ui-dialog-title" id="ui-dialog-title-selectMsg">Error</span> 
</div> 

Мне нужно установить фон титул 2-й Диалог на красный. В этом диалоговом окне отобразится сообщение «Ошибка», как указано в элементе span второго <div>.

Я также добавил логики в моем .js файл на неисправного состояния:

$('#ui-dialog-title-selectMsg').parent('.ui-dialog-titlebar').css('background-color', 'red');

Но я до сих пор следующее всплывающее окно:

Как бы мне это сделать?

Answer 1

Добавить класс error на div для второго диалогового окна. Затем в таблице стилей напишите следующее.

.error { 
    background: red; 
} 

Вы можете изменить цвет от red к более хорошему цвету, используя шестнадцатеричные коды. Пример:

.error { 
    background: #EC485B; 
} 

Это даст вам больше кирпично-красный. Играйте с шестнадцатеричными цветовыми кодами, чтобы найти оттенок красного цвета для вашего приложения.

Answer 2

Я рекомендую решение CSS для этого -

1. Вы можете добавить стиль в UI-диалоговом титульного selectMsg

   #ui-dialog-title-selectMsg { 
       background: red; 
   } 
   

2. Или вы можете использовать CSS псевдо-класс

   .ui-dialog-titlebar:nth-child(2) > .ui-dialog-title { 
       background: red; 
   } 
   

Я предположил, что вы чтобы дать цвет фона.

Если вы хотите, чтобы цвет фона для строки заголовка DIV, используйте ниже CSS:

.ui-dialog-titlebar:nth-child(2){ 
     background: red; 
} 

Answer 3

, если вы хотите сделать это с помощью JQuery использовать ниже синтаксиса,

$('#ui-dialog-title-selectMsg').parent('.ui-dialog-titlebar').css('background-color','red') 

или если вы wnat пользователю инлайн затем добавить

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="background:red"> 
     <span class="ui-dialog-title" id="ui-dialog-title-selectMsg">Error</span> 
</div> 

или добавить класс для второго диалога говорит: «эээ-BG ', а затем дать ему стиль.

.err-bg{ 
background: red; 
} 

Избегайте inline css как можно больше.потому что это не рекомендуется

Answer 4

Добавить

#ui-dialog-title-selectMsg { 
    color: red; 
} 

в таблицу стилей. Если вы хотите использовать другой цвет, то вы можете использовать http://www.colorpicker.com/ и скопировать шестнадцатеричный код цвета и просто добавить, как следующие (обратите внимание на хэштегом):

#ui-dialog-title-selectMsg { 
    color: #E0412F; 
}