JSF，CSS - 動態降低亮度

我在玩CSS樣式。如何聰明地做到這一點？JSF，CSS - 動態降低亮度

enter image description here

我能夠手動創建X在CSS文件中的綠色變化，但決不能是一個解決辦法..

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

如何降低它「動態地」？

來源

2012-10-08 gaffcz

當你說「動態」你的意思是「莫名其妙程序，而無需手動維護不同的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

來源

2012-10-08 07:44:55

超級，非常簡單的解決方案，謝謝！ – gaffcz

使用jQuery（許多JSF框架已經在使用它/包括它），你可以選擇與MyClass類的所有元素，如認爲：

$(".myClass")

然後你可以使用each()定義一個函數在所有執行其中，並在功能中使用css來更改屬性。

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

用超時啓動此代碼並設置各種顏色級別。

我已經搜索，但我找不到直接編輯CSS樣式的方法;我不知道是否有人可以爲它提出一個方法。

更新：A way of changing the class;缺點是它看起來代替了所有的類，也許你的JSF庫自己添加了一些類，如果它在一個組件中的話。小心使用。

來源

2012-10-08 07:29:51 SJuan76

非常感謝您！我會試試看！ – gaffcz

爲什麼要推動這個邏輯在客戶端執行呢？不僅是痛苦的維護，它也是[FOUC]（http://en.wikipedia.org/wiki/Flash_of_unstyled_content）-ish –

我再次讀到你的問題，我誤解了它;我認爲你想在一段時間內淡出所有的文本（這就是爲什麼有超時）。你仍然可以嘗試改變我的解決方案（將「myNewColor」作爲一個全局變量，改變爲每個用途），但我不太確定元素將被返回的順序。 – SJuan76

JSF，CSS - 動態降低亮度

回答

相關問題