JSF，CSS - 动态降低亮度

Question

我正在玩CSS样式。如何巧妙地做到这一点？

我可以在css文件中手动创建x绿色变体，但它绝对不是解决方案..

<h:outputText value="#{bean.date1}" styleClass="green1"/>
<h:outputText value="#{bean.date2}" styleClass="green2"/>
<h:outputText value="#{bean.date3}" styleClass="green3"/>

如何“动态”减少它？

Answer 1

我假设当你说“动态”时，你的意思是“以某种方式编程，而不必手动维护不同的CSS类”。如果是这样，您的场景相当简单 - 您可以让所有输出具有相同的颜色，但不同的不透明度。您应该能够直接设置style属性：

<h:outputText value="#{bean.date1}" style="opacity:1"/>
<h:outputText value="#{bean.date2}" style="opacity:0.8"/>
<h:outputText value="#{bean.date3}" style="opacity:0.6"/>

〜Fiddled

Answer 2

使用JQuery（许多JSF框架已经使用它/包含它），您可以选择类MyClass类的所有元素：

$(".myClass")

然后，您可以使用each()定义要在所有这些函数中执行的函数，并在函数中使用css来更改属性。

$(".myClass").each(function() {
  $this.css("color", "myNewColor");
}

使用超时启动此代码并设置各种颜色级别。

我搜索过但我发现无法直接编辑CSS样式;我不知道是否有人可以为它提出方法。

更新：A way of changing the class;缺点是它似乎取代了所有类，如果它在一个组件中，你的JSF库可能会自己添加一些类。小心使用。