이벤트 발생 시 일괄적으로 스타일 변경
페이지 정보
작성자 서방님 댓글 0건 조회 89회 작성일 07-08-07 16:56본문
흔히
<style type="text/css">
<!--
.myTD {
color: #FFFFFF;
background:#7789E1;
}
//-->
</style>
와 같이 스타일을 지정하고 class="myTD"로 해당 스타일을 적용합니다.
그런데 어떤 이벤트가 발생할 때 id="어떤아이디", 또는 class="어떤클래스"를 가지는 객체에 대해 한 번에 일괄적으로 스타일을 변경하고 싶을 때가 있습니다.
예를 들면 인쇄 버튼을 클릭했을 때 특정 객체들은 안보이게(display:none) 한다거나..
버튼을 클릭했을 때 테이블 셀의 배경색과 글자색을 일괄적으로 바꾸고 싶다거나 할 수도 있겠죠..
(이 경우 아래 스크립트에서 .myTD 대신에 TD를 넣어주면 모든 TD에 대해 적용됩니다.)
다음의 내용은 버튼을 누르면 class="myTD"인 테이블 셀의 글자색과 배경색이 일괄적으로 변경되는 예입니다.
<style id="myStyle" type="text/css"></style>
<script type="text/javascript" language="javascript">
function change_style() {
var IE = document.all?true:false;
if(IE == false) {
document.getElementById('myStyle').sheet.insertRule('.myTD { color:#FFFFFF }', document.getElementById('myStyle').sheet.cssRules.length )
document.getElementById('myStyle').sheet.insertRule('.myTD { background:#7789E1 }', document.getElementById('myStyle').sheet.cssRules.length )
}
else {
document.styleSheets('myStyle').addRule(".myTD", "color:#FFFFFF");
document.styleSheets('myStyle').addRule(".myTD", "background:#7789E1");
}
}
</script>
<table align="center" width="400" cellpadding="3" cellspacing="0" border="1">
<tr>
<td class="myTD">class="myTD"</td>
<td>TD</td>
<td class="myTD">class="myTD"</td>
</tr>
<tr>
<td>TD</td>
<td class="myTD">class="myTD"</td>
<td>TD</td>
</tr>
<tr>
<td class="myTD">class="myTD"</td>
<td>TD</td>
<td class="myTD">class="myTD"</td>
</tr>
</table>
<div align="center"><input onclick="change_style()" type=button value="myTD class의 스타일 일괄 변경"></div>
출처 : http://mrsong.pe.kr/board/board/board.php?dbn=tiptech&action=read&fixnum=154&viewnumber=88&pagenum=1
댓글목록
등록된 댓글이 없습니다.
