흠... 동적으로 클래스를 추가하고 삭제하여 스타일을 바꾸는 기술은 아주 많은 방법이 있다.

이번에 사용한 방법은 클래스를 계층적으로 다음과 같이 정의한 뒤...

.today-text
{
    color : #ffffff;
    font-weight : bold;
    margin : 8px 0 0 60px;
}
.text-b .today-text
{
    color : #848484;
    font-weight : normal;
    margin : 8px 0 0 60px;
    font-size : 10px;
    margin : 10px 0 0 60px;
}

이걸 보면 감이 잡혀야지...

html 코드는 이렇게 되어있을 것이다...

<div id="to_program" ><div class="today-text"><?=substr(date("m-d"), 0, 2)?>&nbsp; <?=substr(date("m-d"), 3, 2)?></div></div>

php 코드는 날짜를 써 넣으려하다보니 들어간 것.....

암튼 어떤 이벤트가 발생했을때 id 가 to_program 인 엘리먼트에 text-b 라는 클래스를 add 해주면

아래쪽의 css 가 적용되지 않겠는가.ㅋㅋ

자바스크립트 코드는 다음과 같다... 

Ext JS 라이브러리를 사용했을 경우..

this.today = this.form.child("#to_program");
this.form = Ext.get(form);

만약 위의 하얀 글씨의 css 를 적용하려면..

this.today.addClass("text-b");

밑의 글씨의 css 를 적용하려면..

this.today.removeClass("text-b");

이렇게 하면 되겠지!!

잊어먹지말자.ㅋㅋ

Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요