javascript를 이용하여 css 클래스 변경하기 예제...
Posted 2007. 11. 30. 00:47발췌 : Ajax Programming 기초부터 중급까지 - 가메출판사, 최범균
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<title>CSS Class 변경</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload = function() {
var redRadio = document.getElementById("red");
var blueRadio = document.getElementById("blue");
var blackRadio = document.getElementById("black");
ajax.Event.addListener(redRadio, "click",
ajax.Event.bindAsListener(doClickOnRadio, redRadio));
ajax.Event.addListener(blueRadio, "click",
ajax.Event.bindAsListener(doClickOnRadio, blueRadio));
ajax.Event.addListener(blackRadio, "click",
ajax.Event.bindAsListener(doClickOnRadio, blackRadio));
}
function doClickOnRadio() {
var view = document.getElementById("view");
alert(this.value);
view.className = this.value;
}
function fncChangeBlue()
{
var view = document.getElementById("myView");
view.className = 'myBlack';
}
</script>
<style type="text/css">
div.red {
font-weight: bold;
color: red;
background-color: #00FFFF;
}
div.blue {
font-weight: bold;
color: blue;
background-color: #FFFF00;
}
div.black {
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
}
.myBlack {
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div id="view" class="black">스킨을 변경해보세요.</div>
<form name="f">
<input type="radio" name="skinName" id="red" value="red" />RED
<input type="radio" name="skinName" id="blue" value="blue" />BLUE
<input type="radio" name="skinName" id="black" value="black" checked="checked" />BLACK
<div id="myView">
<a href="javascript:fncChangeBlue()">변경하기.</a>
</div>
</form>
</body>
</html>
invalid-file'개발노트 > Script/CSS/jQuery' 카테고리의 다른 글
| scriptaculous를 이용한 tooltip 예제 (0) | 2007.12.14 |
|---|---|
| Mootools를 이용한 Calendar 창. (0) | 2007.12.06 |
| Flex서비스용 cross domain설정 (0) | 2007.11.29 |
| prototype.js api 한글 (0) | 2007.10.30 |
| Prototype.js 151 api영문판 pdf (0) | 2007.10.30 |
- Filed under : 개발노트/Script/CSS/jQuery
