자바스크립트에서의 DOM과 CSS
첨부파일 :
1262944744_p68_js_dom_css.zip
p68_js_dom_css.zip<html>
<head>
<script type="text/javascript" src="68_csstest.js"></script>
<link href="68_style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<table id="tb">
<tr>
<th id="tb_head">제품명</th>
</tr>
<tr>
<td id="tb_firstline">비행기</td>
</tr>
<tr>
<td id="tb_secondline">대형차</td>
</tr>
</table>
<br/>
<input type="button" value="스타일1 설정" onclick="setStyle1()"/>
<input type="button" value="스타일2 설정" onclick="setStyle2()"/>
</body>
</html>
=============================================================================
//68_csstest.js 파일을 만든 후 다음의 내용을 입력한다.
function setStyle1()
{
// HTML 엘리먼트의 레퍼런스 획득
oTable= d0cument.getElementById("tb");
oTableHead= d0cument.getElementById("tb_head");
oTableFirstLine = d0cument.getElementById("tb_firstline");
oTableSecondLine = d0cument.getElementById("tb_secondline");
// 스타일 설정
oTable.className = "Table1";
oTableHead.className = "TableHead1";
oTableFirstLine = "TableContent1";
oTableSecondLine = "TableContent1";
}
function setStyle2()
{
// HTML 엘리먼트의 레퍼런스 획득
oTable= d0cument.getElementById("tb");
oTableHead= d0cument.getElementById("tb_head");
oTableFirstLine = d0cument.getElementById("tb_firstline");
oTableSecondLine = d0cument.getElementById("tb_secondline");
// 스타일 설정
oTable.className = "Table2";
oTableHead.className = "TableHead2";
oTableFirstLine = "TableContent2";
oTableSecondLine = "TableContent2";
}
============================================================================
// 68_style.css 파일을 만든 후 다음의 내용을 입력한다.
.Table1{
border :DarkGreen 1px solid;
background-color: LightGreen;
}
.TableHead1{
font-family : Verdana, Arial;
font-weight : bold;
font-size : 10pt;
}
.TableContent1{
font-family : Verdana, Arial;
font-size : 10pt;
}
.Table2{
border :DarkBlue 1px solid;
background-color: LightBlue;
}
.TableHead2{
font-family : Verdana, Arial;
font-weight : bold;
font-size : 10pt;
}
.TableContent2{
font-family : Verdana, Arial;
font-size : 10pt;
}