PrimeFaces会动态地改变颜色

有没有办法动态更改PrimeFaces咆哮组件的背景？ 我希望能够在出错时显示红色背景，在成功时显示绿色背景

---

提前感谢。

您应该尝试添加所需的CSS

<style>
        div[id="forma:growl-error_container"] > div {
            background-color: red !important;
        }
        div[id="forma:growl-success_container"] > div{
            background-color: green !important;
        }
</style>

div[id=“forma:growl-error\u container”]>div{
背景色：红色！重要；
}
div[id=“forma:growl-success\u container”]>div{
背景色：绿色！重要；
}

之后，使用EL在成功和错误之间切换

<p:growl id="growl-error" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 2}"/> 
<p:growl id="growl-success" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 0}"/>

希望对您有所帮助。

<style>
        div[id="forma:growl-error_container"] > div {
            background-color: red !important;
        }
        div[id="forma:growl-success_container"] > div{
            background-color: green !important;
        }
    </style>
    <h:form id="forma">           
        <p:growl id="growl-error" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 2}"/> 
        <p:growl id="growl-success" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 0}"/> 
        <p:panel header="Growl">  
            <h:panelGrid columns="2" cellpadding="5">  
                <p:outputLabel for="msg" value="Message:"/>   
                <p:inputText id="msg" value="#{growlView.message}" required="true" />  
            </h:panelGrid>  

            <p:commandButton value="Save" actionListener="#{growlView.saveMessage}" update="@form" />  
        </p:panel>     
    </h:form> 

div[id=“forma:growl-error\u container”]>div{
背景色：红色！重要；
}
div[id=“forma:growl-success\u container”]>div{
背景色：绿色！重要；
}

---

这是一组用于演示的代码。

您可以使用咆哮中的严重性属性来完成此操作

<p:growl id="myInfo" severity="info"/>
<p:growl id="myError" severity="error"/>

#myinfo {
    background-color: blue;
}
#myerror {
    background-color: red;
}

#我的信息{
背景颜色：蓝色；
}
#迈罗{
背景色：红色；
}

但是添加一个基于

---

但是，如果您只想在其中设置文本样式，则可以使用一个咆哮和

如果您一次只在上下文中添加一条消息，则上述解决方案才有效。如果添加了多条消息，则所有咆哮项都将根据最后一条消息的严重性进行着色。有关此问题的更多详细信息，请访问下面的链接

（土耳其语内容，您可能需要翻译）

为了解决这个问题，您应该按图标样式查找咆哮项（PrimeFaces只更改不同严重性级别的咆哮图标），并向咆哮图标html元素的父级添加自定义样式表类，以获得不同的背景颜色

首先定义以下脚本（将自定义css类添加到父级）：

结果是：）

---

希望这对任何人都有帮助。

今天我和一位同事花了三个小时试图找出其他答案不起作用的原因。我们的系统需要HTML文件来包含外部文件中的CSS和JS。没有标签！这就是我们的工作。对于我们的项目，我们在主目录中有一个名为“css”的文件夹和一个名为“js”的文件夹

以下是HTML正文的相关代码：

<h:outputStylesheet name="css/styles.css" />
<h:outputScript library="js" name="growlColour.js" />

<p:growl id="growlC" autoUpdate="true" showDetail="true" sticky="true" />

<p:commandButton id="buttonC" action="#{bean.methodC}" oncomplete="growlColour();" />

显然，您可以根据以下代码更改严重性，从而改变颜色。JS将CSS类应用于正确的咆哮消息对象，从而修改咆哮消息

styles.css：

.g-info {
    background-color: green;
}
.g-warn {
    background-color: red;
}
.g-error {
    background-color: red;
}
.g-fatal {
    background-color: black;
}

growlColor.js：

function growlColour() {
    $(".ui-growl-image-info").parent().parent().addClass("g-info");
    $(".ui-growl-image-warn").parent().parent().addClass("g-warn");
    $(".ui-growl-image-error").parent().parent().addClass("g-error");
    $(".ui-growl-image-fatal").parent().parent().addClass("g-fatal");
}

我认为这是最简单、最可靠的方法

编辑： 有时oncomplete不起作用，例如，如果ajax设置为false。对于所有情况来说，最好的解决方案似乎是不要通过JSF调用JS。相反，在后台bean中创建消息后立即添加这行代码：

public void methodC() {
    String x = "message goes here";
    FacesContext context = FacesContext.getCurrentInstance();
    context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Success", x));
    RequestContext.getCurrentInstance().execute("growlColour();");
}

---

对于那些仍然存在问题并且需要快速简单解决的人，我解决问题的方法是使用以下代码更改背景颜色（我使用angular和TS…）：

---

这不是最好的解决方案，但上面的解决方案都不起作用，对我来说已经足够好了。

根据FacesMessage，我认为它已经做到了。Severity仅更改图标。你是对的。我想的是p:messages，而不是p:Growth谢谢你的回答。我唯一不明白的是：div[id=“forma:growl-success\u container”]forma到底是什么？我要写什么来代替它呢？forma是一个包含p:growl的表单。因此，forma:growl-success_容器是growl组件的id，您可以使用可以获得正确id的查看页面源。非常感谢您的帮助。我想我的咆哮id是通过友好方式生成的。我想是这个。j_idt80：消息容器。但是我担心j_idt80是通过友好方式生成的。如果您指定包含p:咆哮的组件（h:form）id，j_idt80将不会生成。非常感谢！工作很好！！！从primefaces本机运行这将是非常棒的，但是这个解决方案非常棒。它本机通过在咆哮中使用严重性属性得到支持<代码>或多个。只要看看文档，如果你在上下文中添加了多条消息，比如2条（第一条消息的严重性信息，第二条消息的危险性），那么所有咆哮元素都是相同的（在我们的示例中，最后一条消息的严重性-危险性为颜色）。因此，上述解决方案是不正确的！请看我的答案…如果其他人都不工作，你必须有一些额外的代码，把事情搞砸了，你需要这个来纠正它。。。很奇怪

public void methodC() {
    String x = "message goes here";
    FacesContext context = FacesContext.getCurrentInstance();
    context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Success", x));
}

.g-info {
    background-color: green;
}
.g-warn {
    background-color: red;
}
.g-error {
    background-color: red;
}
.g-fatal {
    background-color: black;
}

function growlColour() {
    $(".ui-growl-image-info").parent().parent().addClass("g-info");
    $(".ui-growl-image-warn").parent().parent().addClass("g-warn");
    $(".ui-growl-image-error").parent().parent().addClass("g-error");
    $(".ui-growl-image-fatal").parent().parent().addClass("g-fatal");
}

public void methodC() {
    String x = "message goes here";
    FacesContext context = FacesContext.getCurrentInstance();
    context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Success", x));
    RequestContext.getCurrentInstance().execute("growlColour();");
}

this.msgs.push({severity:'success', summary:'success', detail:'it worked'});
setTimeout(()=> { document.getElementById('*the ID*').children[0].children[0].setAttribute('style', 'background-color:green');
}, 10);