如何在 JSF 中动态添加 CSS 样式属性答案

【问题标题】：how to add a css style property dynamically in JSF如何在 JSF 中动态添加 CSS 样式属性
【发布时间】：2013-08-02 08:50:16
【问题描述】：

我在 UI 组件中使用 primeface，我必须通过使用 css 样式来临时设置布局单元的背景，

 .layoutCustomStyle.ui-layout-unit-content
  {
     background-image: url('resources/images/backgrnd.png');
  }

layoutunit的id是“layoutId”，使用的styleclass是“layoutCustomStyle”

在 xhtml 中，

<p:layoutUnit position="top" id= "layoutId" styleClass ="layoutCustomStyle">
</p:layoutUnit>

但我想要的是动态添加背景图片。图像将由文件浏览器选择，因此我无法为此添加单独的类并使用 bean。

UIViewRoot view = FacesContext.getCurrentInstance().getViewRoot();
UIComponent comp= view.findComponent("layoutId");
Map<String, Object> attrMap = comp.getAttributes();
String className = (String)attrMap.get("styleClass");

使用它我可以设置和获取类名，但如何动态更改属性“背景图像：”？

希望问题很清楚。任何帮助表示赞赏。

提前致谢，飞马

【问题讨论】：

动态地表示你想改变什么事件的背景？？你在使用任何 Bean 类吗？？如果你告诉我正确，我会为你提供代码。
有一个文件浏览器，选择的图像应该设置为背景。是的，我正在使用 bean 类。我正在使用 primeface 文件上传组件来选择图像文件。

标签： css jsf primefaces

【解决方案1】：

使用style 属性而不是styleClass。

【讨论】：

我动态添加了样式"background-image:url("")"。但是在调用“更新”时，布局单元消失了（它移动了一些靠近标题布局单元的位置并被隐藏）。这是“更新”的问题
只需使用style="#{bean.style}" 而不是#{bean} 是视图范围的bean。手动抓取组件并以编程方式直接操作它们一直是一种可疑的方式。

【解决方案2】：

这是一个老问题，但目前已被查看 10,354 次。我想分享我在 primefaces 6.2 中解决“动态添加 css 样式属性”的方法

在我的布局中，我有一个标题，我需要每 10|20 秒动态更改图像。

 <h:panelGrid id="cabecera" columns="2" cellpadding="1" columnClasses="..."   
       style="width:100%; background-size: cover; background-position: center; background-image: url('#{request.contextPath}/resources/images/header/Vignette/#{userSelected.headerFile}');">    
            <h:form id="...."  >

我有一个列表，其中包含我可以使用的所有图像的名称，userSelected.headerFile 随机选择一个。

三个类似的选项：

1.- 起初我直接使用 p:poll 来更新 panelGrid id 'cabecera'：

<p:poll interval="10" update="@([id$=cabecera])" autoStart="true"/>

当然可以，每次更新时，背景图片都会发生变化。在更新和页面闪烁不成问题的某些情况下，这可能就足够了。

2.- 在 p:poll 的监听器中使用一点 JavaScript，一个 bean 方法。声明一个js函数来改变背景属性（或任何其他）：

 <script> 
     function headerBackground(urlBG) {
         var laUrl =  (urlBG); 
         document.getElementById('cabecera').style.backgroundImage = laUrl;
     }
 </script>

在我的 Bean userSelected 中，我声明了 一个通过 RequestContext.getCurrentInstance().execute(...) 调用 javascript 函数的方法 .我决定只收到 url 并在函数中添加其余值：

public void callJSheaderBackground(String url) {
    String jsFunc="headerBackground(\"".concat(url.trim()).concat("\")");
    try{
        RequestContext requestContext = RequestContext.getCurrentInstance();  
        requestContext.execute(jsFunc);
    }catch(Exception ex){
        ...
    }
}

终于p:poll

  <p:poll interval="20"  listener="#{userSelected.callJSheaderBackground('url(\''.concat(request.contextPath).concat('/resources/images/header/Vignette/').concat(userSelected.headerFile).concat('\')'))}"  autoStart="true"/>

3.- 直接调用JS函数我的 JS 函数，接收 contextPath 和 图像文件名 作为参数：

 function setVignetteAsBackground(contextPath,vignetteName) {
     var laUrl =  "url('" + (contextPath)+'/resources/images/header/Vignette/'+(vignetteName)+"')";  
     document.getElementById('cabecera').style.backgroundImage = laUrl;
 }

然后在 onstart|oncomplete 事件上直接从 p:poll 调用：

<p:poll interval="20" onstart="setVignetteAsBackground('#{request.contextPath}','#{userSelected.headerFile}')"  autoStart="true"/>

希望对某人有用。

【讨论】：