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

MyClassJQuery（多くのJSFフレームワークがすでに使用/インクルード）を使用すると、次のようなクラスを持つすべての要素を選択できます。

$(".myClass")

次にeach()、 を使用してそれらすべてで実行する関数を定義し、関数で を使用cssして属性を変更できます。

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

タイムアウトを指定してこのコードを起動し、さまざまなレベルの色を設定します。

検索しましたが、CSS スタイルを直接編集する方法が見つかりませんでした。誰かがその方法を提案できるかどうかはわかりません。

更新:クラスを変更する方法。欠点は、すべてのクラスを置き換えているように見え、JSF ライブラリがコンポーネント内にある場合は、それ自体でいくつかのクラスを追加している可能性があることです。注意して使用してください。

于 2012-10-08T07:29:51.783 に答える