动态更改命令按钮的背景颜色

Question

我想在 Primefaces 中动态更改 commandbutton 的颜色。

命令按钮的代码摘录如下：

<p:commandButton id="movieBtn" value="#{kkcIncomingErrorBean.counter}" 
type="button" onclick="PF('errorTable').show()" 
styleClass="#{kkcIncomingErrorBean.buttonStyle}"/>

buttonStyle 是 kkcIncomingErrorBean 的字段 class:

private String buttonStyle="background-color:red";
...
public String getButtonStyle() {
    return buttonStyle;
}

public void setButtonStyle(String buttonStyle) {
    this.buttonStyle = buttonStyle;
}

有趣的是，在更新时 counter 变量被更新但 buttonStyle 没有更新。

你有什么办法解决这个问题吗？

问候

Answer 1

您混淆了 style 和 styleClass。

style 属性应该用于声明单个 CSS 属性，就像您当前在模型中具有紧耦合一样。

styleClass 属性只能用于声明 CSS class 名称，这些名称又在具有属性的普通 CSS 文件中声明。它最终呈现为 HTML class 属性，如果您查看 JSF 生成的 HTML 输出，您应该注意到这一点。

所以你有 2 个选择：

使用 style 属性。

<p:commandButton ... style="#{kkcIncomingErrorBean.buttonStyle}" />

改用 CSS class 名称。
```
private String buttonStyle = "error";
```
在您 include via <h:outputStylesheet>.
的普通 CSS 文件中使用以下 class 声明
```
.error {
    background: red;
}
```
顺便说一下，setter 是不必要的。

当然，首选 CSS class 选项 2 中所示的正常名称。 CSS 属性不属于 Java 文件，但属于 CSS 文件。

动态更改命令按钮的背景颜色

Changing dynamically background color of commandbutton

jsf

primefaces

jsf-2