1

我正在玩 CSS 样式。如何以某种方式智能地做到这一点？

在此处输入图像描述

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

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

如何“动态”减少它？

4

2 回答 2

2

我假设当您说“动态”时，您的意思是“以某种方式以编程方式，无需手动维护不同的 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"/>

~摆弄

于 2012-10-08T07:44:55.383 回答
0

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

$(".myClass")

然后你可以使用each()定义一个函数在所有这些函数中执行，并css在函数中使用来改变属性。

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

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

我已经搜索过，但我没有找到直接编辑 CSS 样式的方法；我不知道是否有人可以提出一种方法。

更新：改变班级的一种方式；缺点是它似乎替换了所有类，如果 JSF 库在组件中，它可能会自行添加一些类。小心使用。

于 2012-10-08T07:29:51.783 回答