<html>
<head>
<title>object의 CSS class제어</title>
<style type="text/css">
<!--
/* 필수입력 */
.essential{ color: #FD0505;} /* 클래스 essnetial 에 적용할 스타일 */
-->
</style>
<script language="JavaScript">
/*
해당 Object에 적용된 css 의 클래스를 조건에따라 변동시켜야 할 경우
JavaScript-x에서 접근할수 있는 프로퍼티는 CSS의 class의 경우 class가 아니라. className 이다
아래와 같은 방법으로도 접근이 가능하다.
object.setAttribute("className", "CSS_ClassName");
또 다른 클래스를 적용하지 않고 직접 CSS를 서술할경우에는
object.style.cssText='color: #FD0505;'; 와 같은 방법도 가능하다.
*/
function fncChange(){
var selDiv = frm.selDiv.value; // select의 값을 selDiv 변수에 저장
if(selDiv == "T"){ // selDiv의 값이 T 라면
// getElementById(객체명 or id명) - form 태그 안에 있는 객체를 찾아줌
// id : spCarryAppointYmd의 클래스명을 essential로 정해준다
// id : spCarryAppointYmd의 html에 *를 넣어준다
document.getElementById("spCarryAppointYmd").className = "essential";
document.getElementById("spCarryAppointYmd").innerHTML = "*";
}
else if(selDiv == "F"){ // selDiv의 값이 F라면
// id : spCarryAppointYmd의 클래스명을 지정하지 않는다
// id : spCarryAppointYmd의 html에 *를 빼준다
document.getElementById("spCarryAppointYmd").className = "";
document.getElementById("spCarryAppointYmd").innerHTML = "";
}
}
</script>
</head>
<body>
<form name="frm">
<table>
<tr>
<td>
<select onchange="fncChange();" name="selDiv">
<option value="T">필수</option>
<option value="F">해제</option>
</select>
</td>
</tr>
<tr>
<td><span id="spCarryAppointYmd" class="essential">*</span>필수입력</td>
</tr>
</table>
</form>
</body>
</html>
댓글 없음:
댓글 쓰기