Attributes
<!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">
<head>
<title>Attributes</title>
<style type="text/css">
#box
{
border:1px solid black;
width:200px;
height:150px;
}
.style1
{
background-color:Yellow;
width:200px;
height:150px;
}
.style1 { background-color:Yellow; }
.style2 { background-color:Black; color:White; }
.style3 { background-color:Red; color:Yellow; }
.sel
{
background-color:Yellow;
font-weight:bold;
text-decoration:underline;
}
</style>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
//Attribute
function Test()
{
var size = $("#txt1").attr("size");
//$("#txt1").attr("value", size);
$("#txt1").val(size);
}
function Test2()
{
$("#txt1").removeAttr("size");
$("#txt1").attr("readonly", "readonly");
$("#txt1").attr("title", new Date());
}
//Class
function Class1()
{
//클래스 네임만 style을 주게 되면
document.getElementById("box").className = "style1";
}
function Class2()
{
document.getElementById("box").className = "style2";
}
function Class3()
{
//한번에 하나씩 제어
document.getElementById("box").className = "style3";
}
function Class4()
{
//class관련 함수 = css() 사용 x N개
//여러개를 한번에 제어가능
$("tr:even").addClass("sel");
}
function Class5()
{
$("tr:even").removeClass("sel");
}
function Class6()
{
$("tr:even").toggleClass("sel");
}
</script>
</head>
<body>
<!--Attributes.htm-->
<input type="button" value=" 테스트 " onclick="Test2();" /><br />
<input type="text" id="txt1" size="30" />
<hr />
<!--class-->
<div id="box">
내용물<br />
내용물<br />
내용물
</div>
<input type="button" value="테스트1" onclick="Class1();" />
<input type="button" value="테스트2" onclick="Class2();" />
<input type="button" value="테스트3" onclick="Class3();" />
<hr />
<table border="1" width="300">
<tr>
<td>홍길동</td>
<td>서울시 영등포구</td>
</tr>
<tr>
<td>아무개</td>
<td>서울시 서대문구</td>
</tr>
<tr>
<td>홍길동</td>
<td>서울시 영등포구</td>
</tr>
<tr>
<td>아무개</td>
<td>서울시 서대문구</td>
</tr>
<tr>
<td>홍길동</td>
<td>서울시 영등포구</td>
</tr>
<tr>
<td>아무개</td>
<td>서울시 서대문구</td>
</tr>
<tr>
<td>홍길동</td>
<td>서울시 영등포구</td>
</tr>
<tr>
<td>아무개</td>
<td>서울시 서대문구</td>
</tr>
<tr>
<td>홍길동</td>
<td>서울시 영등포구</td>
</tr>
<tr>
<td>아무개</td>
<td>서울시 서대문구</td>
</tr>
</table>
<input type="button" value="테스트" onclick="Class4();" />
<input type="button" value="테스트2" onclick="Class5();" />
<input type="button" value="테스트3" onclick="Class6();" />
</body>
</html>