JSF, CSS - 동적으로 밝기가 감소합니다.

Question

CSS 스타일로 연주하고 있습니다. 어떻게 든 지능적으로 만드는 방법?

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

는 방법 "동적"를 감소 ..

내가 수동으로는 CSS 파일에서 녹색 색상의 변화를 X 만들 수 있어요,하지만 해결책이 아니어야?

jQuery로

Answer 1

나는 가정합니다. 그렇다면 시나리오는 매우 간단합니다. 출력물의 색상은 같지만 불투명도가 다를 수 있습니다. 직접 설정 할 수 있어야한다 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

(많은 JSF 프레임 워크가 이미 포함/사용), 당신은 같은 클래스 MyClass 모든 요소를 ​​선택할 수 있습니다

$(".myClass") 

이 그럼 당신은 모든 실행하는 함수를 정의 할 each()을 사용할 수 있습니다 함수에 css을 사용하여 속성을 변경하십시오.

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

이 코드를 타임 아웃과 함께 실행하고 다양한 색상 수준을 설정하십시오.

검색했지만 CSS 스타일을 직접 편집 할 수있는 방법이 없습니다. 누군가가 그것을위한 방법을 제안 할 수 있는지 나는 모른다.

업데이트 : A way of changing the class; 단점은 모든 클래스를 대체하는 것으로 보이며 JSF 라이브러리가 컴포넌트에 있다면 일부 클래스 만 추가하는 것일 수도 있습니다. 조심해서 사용하십시오. 당신이 "수동으로 다른 CSS 클래스를 유지하지 않고, 프로그래밍 어떻게 든"당신이 의미"동적"말할 때